ホームページをデザインする

さて今回から私の本業の分野「デザイン」にはいります。 10年間Webデザイナーとして働いてきましたが、ホームページをデザインするということは、ただきれいなサイトをつくることが「デザイン」じゃないんだなーと考えるようになりました。

わたしが思うweb(ホームページ)デザインとは「情報を正確に把握して、構築すること」です。まあ深いようで浅い話です。漫画を描くときに、読み手の視点を考えコマ割を考えるように、ホームページも、読み手を考えてつくります。

そして、「連載」にするか「読みきり」にするか、考えて漫画にするように、ホームページも「動的ページ」にするか「静的ページ」にするか考えます。

何も作らずにイメージするのは難しいので、まずトップページのラフを前章の「ヘッダー」などに割り当てて作ってみます。

161121_img_01

先に「サイトマップ」という設計図を始める人が多いですが、作りたいものをイメージしてからのほうが、意欲がわくので私はこの順序でやります。ネームを考える前に、一番書きたいシーンを描いてしまうアレです。

さて、ここからホームページを構造化します。ちなみにホームページのトップページをインデックス(目次)といい、ファイル名もかならず「index.html」にします。

161121_img_02

こんな感じ。これをサイトマップとか構造図、ツリー図とかいいます。横にかいてある静・動は「更新の可否」を表します。当然新しく描いた漫画やイラストは見せたいんで「動」。

作者紹介やお問い合わせは特に変動しないんで「静」。 そして、この段階でどうやって更新するか決めます。じゃないと、作ってる途中でできない事に気づいて途方にくれます。

ブログみたいに自動でページが出来ない場合、二つの更新方法はあります。例えば、ギャラリーページにイラストを追加する場合。

・HTML(ページ)を新規に追加。
・jQuery(javascript)による画像拡大システム導入。

jQueryの方が圧倒的に楽ですが、ある程度知識がないと導入できないので、また後の章で説明します。ついでに更新スケジュールなんかも決定しちゃいましょう。

161121_img_03

む?こうなると、新しいページと古いページ全部更新しないといけないことがわかりますよね。最初の2・3ページならまだしも、10ページ以上になったらとてもやってられません。

161121_img_04

なので、デザインを変えて「戻る」だけのボタンにします。 更新するのはギャラリーのトップと新規ページだけになります。

161121_img_05

これなら、更新も苦じゃなくなりますね。これが「情報の分析」です。それでは、いよいよイメージにしていきましょう。

次のお話