ポートフォリオサイトを眺める

　ポートフォリオサイトを作ろうと思い、いくつか見てみて感じたことを書きます。

チャレンジ

　以前読んだ「センスは知識からはじまる」で紹介されていた方法を実践してみようかと思っています。やり方は、「定番」「流行」「共通項」それぞれを分析すること。

　まずは「定番」の分析から。といっても、定番のポートフォリオサイトがどういうものか全く分からなかったので、サイトのデザインならWebデザイナーだろうと思い、Webデザイナーが作っているサイトのみ見て回りました。有名なデザイナーや、ポートフォリオサイトをまとめているところを参考にいくつか。

意外と一貫性が大事

　デザインの一貫性に関してはwebデザインのみならず、デザイン全般に言えることだと思います。そんななか、見ていて気になった一貫性が欠けていると思われる箇所を２点ほど挙げます。

　１つはナビゲーションについて。特にグローバルナビゲーションというか、どのページでも同じように表示されており、各種メインページ（もしくは場所）へのリンクをまとめたものです。ここに「Works」や「About」などのリンクを置いている方が多いように感じる一方、たまに「Blog」を載せている方もいました。もちろん、同一サイト内にブログもある場合は問題無いのですが、別サイトへ飛ぶ場合は設計上良く無いのではないかと考えます。

　別サイトへ飛ぶ「Blog」リンクがグローバルナビゲーション内にあると良くない理由としては、その特性上「どのページでも同じ見た目、同じ順番、同じ機能を有している」べきであるからです。別サイトへ飛んだ時にグローバルナビゲーションが無くなった場合、ユーザを迷子にさせてしまいます。ブログリンクを押した後すぐにブログサイトへ飛ばす必要も無い場合もあるかと思うので、ブログサイトの紹介ページなどを作り、そのページから遷移させるようにすると良いのではないかと思います。

　もう１つは、ちょっと全体的な感じにもなってしまいますが、見出しやコンテンツ領域の見た目です。見出しは、一貫してフォントやサイズが同じであるかどうかで、例えば作品ページであれば「作品」とか「Work」と書かれていたり、作品のタイトルがこれに当たります。コンテンツ領域は、レイアウトや背景に使っている画像等がどのページでも同じであるか、異なったとしても何らかの関連性があるかどうかです。

　WebデザイナーManaさんのサイトが良い例かなと感じています。トップページにある「マナです」から始まる文言とその他のページの見出しのフォントサイズが同じで、さらにこのフォントサイズが結構大きめなので遷移しても見出しであることが明白です。さらに、すべてのページでコンテンツが白い紙のような背景の上に載っており、作品一覧ページ以外は概ね画面に収まる大きさになっています。これらが良くない設計の場合どうなるのか。

　見出しやコンテンツ領域の見た目が異なる場合、ページ遷移した時に再度それらの情報の理解から始めなければなりません。どこが見出しなのか、コンテンツはどこからどこまでかなどです。こういったことを意識させないデザインが必要なのかなと思います。

　主要なページ数が少なくなりがちなポートフォリオサイトが（１ページのみのサイトもあるが）、情報が多くなる場合はこういった点に気をつけてみようと思います。

Webフォント

　Webの知識はちょっと疎いので、画像かと思ってたロゴがテキストだった、というサイトがいくつもありました。コードを見てみるとWebフォントを使用している方もいて、これは難しくなるなぁと感じました。

　大学時代に講義の課題でサイトを作成した際に、もちろんフォントの指定を行いました。ただその時は、WindowsでもMacでも、ちょっと古いOS、ブラウザで見ても表示が崩れないように、という意図から標準的なフォントを指定していました。しかし、近年なのでしょうか、Webフォントを指定するデザイナーが増えてきているとのこと。ということは、全文ではないにしろ、見出し等においてはデザイン的な理由がしっかり求められるようになりそうだなと思いました。必要な箇所でデザインに沿ったフォントを指定していくことが重要だと思うので、フォントについてもきっちり勉強しなければ、と。

レスポンシブ対応

　業界的にはもしかすると当たり前なのかもしれませんが、Web初心者の僕からするとレスポンシブ対応されているサイトはやはりすごいなと感じます。特に３段階に分けてデザインされているサイトは面白かったです。実装上の知識・技術もそうですが、複数の状況に合わせたデザインを考えなければならないため、とても興味深く見させてもらっています。

　スマホで見るサイズとなると、グローバルナビが起きにくくなる場合があると思います。そのため、メニュー用のアイコンを作成し、タップするとメニューがプルダウンで表示されるようなタイプのデザインもありました。また、これはデザイン的な話ではないかもしれませんが、作品一覧画面等は結構重い場合もあるので、一度に読み込む作品の数を柔軟に変更すると良いのかもしれません。

今回のまとめ

　これを始める前は、自分が好きだと感じるサイトを参考にしつつデザインを考えようとしていました。単純にかっこいいとか可愛いという主観のみではデザインとは言えないなと感じ、「センスは知識からはじまる」に書いてあった方法を試し始めました。結果として、まず定番といえるサイトかどうかは分かりませんが、いくつかのサイトを見てみて基本的な要素の一部でも気づけたと思うので、まずは第一歩かなと思います。最初はこんなもんなのかなと。おそらく本で解説されていることと趣旨が異なっていると感じてはいますが、一度このままやってみようかなと思います。

余談

　なんとなくブログの書き方を「ですます調」に変えてみました。これまでも何度か無意識に「ですます調」になっていたので、もしかしたらこっちの方がやりやすいのかなと思い変えました。