HTML/CSS練習メモ
下記の本を参考に勉強中。
「WEBサイトとは何か」「デザインとは何か」という定義から、実際に手を動かしながら学ぶ用の素材までついている本。デザインと言ってもただおしゃれでかっこいいものが良い…というわけではなく、“何のために”“誰に向けて”制作するのかというところが肝だと改めて参考になった。
サイト制作の流れ（参考：p30）
（１）企画
何のためのそのサイトを作成するのか、メインユーザー層は誰かを設定。「ペルソナ」と呼ばれる具体的な人物像を設定するとよりデザインのイメージがしやすくなる。性別、年齢、趣味から設定する。
（２）サイトマップ
WEBページの構成を考える。複雑だとユーザーから見てもわかりにくいので、2～3階層以内が◎。自分でサイトを見ていても、どのページから必要とする情報が得られるかわからず離脱してしまうことが多いので、制作時はシンプルなサイトを心掛けたいと思った。
（３）ワイヤーフレーム
デザインの骨組みのこと。コンテンツをサイト上のどこにどれくらいの大きさで配置するか？という型のようなもの。ページ内の要素別に分け、どの要素を一番伝えたいか整理する。画像なのかロゴなのか、紹介文なのか…
“一般的に、ユーザーの視点は上から下、左から右に移動します。”
“優先順位の高いコンテンツほど、ページの上部、左側に順に配置”
（p34）
ユーザーがサイトを訪問した際に一番目に付くところに大事な要素を大きく配置するのが肝。視点の動きを考え、制作する前から伝えたい情報を整理しておくのは大事だとわかった。ワイヤーフレーム制作用に各種便利なオンラインツールもある。
（４）デザイン
コーディングする前に、実際どのようなデザインにするかのカンプを作成する。最初に設定したターゲット層や目的に合わせて、色や書体等を考える。例えば女性らしい配色=ペール等。
（５）コーディング
ここでHTML/CSSが必要となる。HTMLは文章や画像、色や文字サイズなど装飾に関することはCSSで設定する。
（６）公開
「サーバー」と「ドメイン」を用意する。こちらも各種提供会社がある。
デザインカンプの参考になるギャラリーサイト
ギャラリーサイトは以前「MUUUUU」というサイトをデザイナーの方から教わったことがある。ファッション、音楽…とカテゴリ毎に参考にしやすい洗練されたサイトが集まっている。
本で紹介されていたサイトも閲覧してみた。日本のWEBサイトに絞っている「I/O 3000」というサイトを見ていると目にしたことのあるものもちらほら載っていた。
見やすいと感じる・興味の惹かれるサイトは、ファーストビューに大きく画像や写真が配置されている、余白たっぷりで文字が少ない、最新ニュースや問い合わせと用途別にきちんとメニューから飛べるようになっている…と情報を絞って載せているということが伝わってきた。
大好きなカービィのサイトやBUMPのサイトも載っていて、日頃それとなしに利用していたサイトでもしっかりユーザーが見やすいよう設計されているのだと感心した。
この記事が気に入ったらサポートをしてみませんか？