WORKS-WEBウェブ制作事例
デザイン・コーディング栄光メディアミックス様 2022-2023
2023年8月末まで勤務していた会社のウェブページを基礎からコーディングの勉強をして作成しました。
作成に至った経緯
2022年に入社して1か月程度経過した頃、過去ウェブ制作部門に勤めていたこともあり社長より看板のウェブページの変更が出来ないか、また、他の方からも冊子で見る形の年賀状の一覧のウェブページも作成出来るか尋ねられました。
看板の元のページは数年前に作成されたもので、レスポンシブ非対応、見出しは画像で工事中も多く、テンプレートを使用しており、簡単に変更とはいかない作りでした。今後の更新を考えると全体的にリニューアルをした方がよいと判断しました。
しかし１から構築はしたことがなかった為、まずはお試しとして簡単な構成で作れそうな年賀状ページをコーディングの勉強をしながら作成、その後に看板のページを作成しました。
年賀状のサイト2022
1ページの簡単な作りですがレスポンシブに対応しています。
はがきの絵の箇所などはそのまま使用するわけにはいかないため、今までに作成してきたはがきやイラストをダミーとして使用しています。
見出しなどページに必要な箇所は適宜作成。
| 全体のデザイン | Photoshop |
|---|---|
| 配置画像 | Illustrator |
看板制作の企業サイト2023
社長より希望されたウェブページを作成しました。
全体の構成について
元となるウェブページはあったものの構成としては大きく変更し、シンプルに「どんなことが出来るか」を伝え、施工事例を増やせる形にしました。
機能について
スマホ対策にハンバーガーメニューを使用、レスポンシブに対応し、フォームはPHPのテンプレートで作成しています。
デザインについて
希望は無くお任せだったので、今までのカラーである青を継承しつつ、明るい印象にしました。 お申込みのボタン、看板の写真などは印象的になるよう全体的にはシンプルに作成。 ロゴも看板の会社らしい形に変更しました。
| 全体の構成・文章 | |
|---|---|
| 全体のデザイン | Photoshop |
| 配置画像 | Illustrator |
デザインのみ東邦通信システムズ様 2016-2017
2014年～2017年はWEB制作部門に勤務。
2016年よりページ全体のデザインにも携わりました。
全てWordPressにて作成。
コーディングは別の方が行っています。
他にも2023年に手掛けたLPもあります。（制作中のため非公開）
温浴施設 各センター（当時）湯の泉様 2017
レトロ感があり、賑やかなサイトにしたいというディレクターからの指示でデザインしました。
サービスの種類が多くても探したいコンテンツが見やすくなるように意識し、和の色と柄を基調に色やアイコンを多く使用しています。他２店舗も色違いで作成。
| 全体のデザイン | Photoshop |
|---|---|
| 画像作成 | |
| ページの情報入れ込み作業 |
ディレクター/デザイナー
コーダーなど4名程度
温浴施設 総合ページ（当時）湯の泉様 2017
各サイトと同時期に作成。各サイトと統一感を感じさせつつ、少し異なるようデザイン。
| 全体のデザイン | Photoshop |
|---|---|
| 画像作成 | |
| ページの情報入れ込み作業 |
ディレクター/デザイナー
コーダーなど4名程度
酸素カプセルLPシンコウプロダクト様 2017
LPなので目を引くようにしたいというディレクターからの指示でデザインしました。
ユーザー様はスポーツに関わる方が多いこともあり、スピードを感じるように、はっきり・くっきりと、かつシンプルで文字にインパクトのあるデザインとなりました。教授のイラストも制作。
| 全体のデザイン | Photoshop |
|---|---|
| 画像作成 | |
| ページの情報入れ込み作業 |
ディレクター/デザイナー
コーダーなど4名程度
美容クリームシンコウプロダクト様 2017
美容を重視し、とにかくすっきりしたとデザインにしたいというディレクターからの指示で作成。
現在は変更していますが、左の女性を固定させ右だけスクロールする形のデザインでした。フォントや余白のバランスを注意しスタイリッシュで高級感を感じるデザインになりました。
| 全体のデザイン | Photoshop |
|---|---|
| 画像作成 | |
| ページの情報入れ込み作業 |
ディレクター/デザイナー
コーダーなど4名程度
建設業協会一般社団法人大和建設業協会様 2016
お客様からは特に希望のデザインが無かったため、ディレクターと相談して誠実な印象が伝わるようシンプルですっきりしたデザインで作成。
全体の色数を抑えることで写真が印象的に見えるようになりました。
| 全体のデザイン | Photoshop |
|---|---|
| 画像作成 | |
| ページの情報入れ込み作業 |
ディレクター/デザイナー
コーダーなど3名程度
幼稚園はらようちえん様 2016
子どもたちがわくわくするような華やかでかわいいデザインにしたいというディレクターからの指示で作成しました。
子どもたちの描いた絵を随所に使用したサイトというコンセプトがあったため、どう生かして作成するかに悩みましたが最終的には楽しいデザインに。
| 全体のデザイン | Photoshop |
|---|---|
| 画像作成 | |
| ページの情報入れ込み作業 |
ディレクター/デザイナー
コーダーなど3名程度