works

- Webサイト制作 -

架空のレストランサイト

架空のレストランサイト

https://restaurantt.taka-portfolio.com/

HTML5 / CSS3 / Illustrator / Photoshop /jQuery / WordPress

ターゲット
地元や近隣にお住まいの20代後半~60代女性、その方々のご家族やご友人
わいわいと賑やかに大人数で食事するよりも、落ち着いた雰囲気でカジュアルに家族や友人と日常的な食事を楽しみたいという方々。
目的
住宅街に位置しており隠れ家的なレストランであるため、お客様に閉鎖的・入りづらいイメージを持たれてしまう。開放的で入りやすいイメージを持っていただき、来店数アップにつなげたい。
ポイント

上記のターゲット像・目的を設定し、架空のレストランサイトを制作しました。
目的に沿った印象にするため、余白を多くとり開放的で清潔感を感じられるデザインにしました。ファーストビューのメッセージ文は敢えて縦書きにしてメリハリをつけています。

色合いについては、白を基調とし、メインカラーをオレンジ系の暖色でまとめて、温もりや明るさをプラスしました。オレンジ系の色は元気で活発なイメージも与える色になるので、お店のコンセプトを考え、彩度を少しやわらげて落ち着いた雰囲気を壊さないように気をつけました。

また、構成については、ファーストビューで店内イメージやお料理の写真のスライドショーを実装し、まずお客様にどのようなお店なのかイメージしていただきやすいようにしています。

架空の企業サイト

架空の企業サイト

https://takahashi-company.taka-portfolio.com/

HTML5 / CSS3 / Photoshop /jQuery / WordPress

ターゲット
取引先の方々、新規営業先の方々、20代~30代の就活中の方々
目的
取引先の方々等に会社のご案内をするため。また、若手の人材確保・育成にも力を入れたいということからサイトをリニューアルしたい。
ポイント

上記のターゲット像・目的を設定し、架空の企業サイトを制作しました。
設立してから比較的年数の浅いIT企業という想定で制作し、老舗のような重厚感ではなく、まだ若い企業らしく爽やかさや軽やかさを感じられるイメージでデザインを考えました。 ファーストビューのスローガンや各セクションの見出しはフォントを大きめに設定して印象的にしています。

色合いについては、ITのイメージからメインカラーにブルー系を採用し、爽やかさが感じられるスカイブルーのような色味にしています。アクセントカラーには反対色のイエローやオレンジ系の色を採用し、目を引くようにしています。

また、構成については、読み疲れてしまわないように各セクションの内容をなるべくコンパクトにまとめています。どうしても文字量が多く長くなってしまう下層ページにはアンカーリンクをつけて直接アクセスできるようにしています。

takahashi-portfolioサイト

takahashi-portfolioサイト

https://taka-portfolio.com/

HTML5 / CSS3 / Illustrator / Photoshop / jQuery

ターゲット
採用担当の方々
目的
転職活動におけるポートフォリオとして、自身の経歴やスキル・制作物をお伝えするため。
ポイント

自身のポートフォリオサイトです。
見やすさと自分らしさを両立するためになるべくシンプルなデザインを心がけました。シンプルな分、ページ変遷アニメーションなどをつけて単調さをフォローしています。

色合いについては、自身の落ち着いたイメージを表現できないかと考え、モノトーンを基調とした色合いにしました。

構成については、home画面は各セクションが明確になるよう背景色を変えてわかりやすくしました。また、各制作物にはアンカーリンクをつけて直接アクセスできるようにしています。

デザイン制作へ