HP制作 | スクール卒業制作

OVERVIEW

自主制作 架空サイト

YEAR 2020


<概要>

千葉県房総を紹介する架空ページ

旅行の観光プランや、施設やお店を総合的に探せるページを作りました。

・デザイン(Photoshop)

・コーディング(HTML/CSS/Javascript)

・レスポンシブ対応(PC/タブレット/スマートフォン)


<全体ページ>

<工夫したところ>

・写真を多く使うことで旅のイメージをしやすいよう意識しました。

 複数写真が並んでいる部分はJqueryで左へスライド。

・見やすさ:"SEARCH"の部分は選択肢が少し多いので、ロゴを加えて視覚的に見やすく  しました。全体的な余白も意識しました。

・配色:写真や自然に馴染む、シンプルな色にしました。

・各ボタンはカーソルを合わせた時に動きをつけています。

<課題を通して学んだこと>

・ペルソナ、目的を初めに明確にしておくべきだということ。それによって載せる情報や順番、量などが決まってくるので大事だと実感しました。

・ワイヤーフレームの大切さ。最初の構成をざっくり考えてコーディングに進んでしまったが、後で調整することが難しくなってしまい一部やり直すこともあったので十分に構成を組んでからコーディングに取り掛かることを学びました。

・適度な余白や、各端末でレスポンシブがしっかり効いていることでユーザーの見やすさが一段と上がること。

・写真の明るさを統一すること。