ホーム > ホームページの作り方 > ホームページをデザインする

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

さて今回から私の本業の分野「デザイン」にはいります。


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


これなら、更新も苦じゃなくなりますね。


これが「情報の分析」です。


それでは、いよいよイメージにしていきましょう。


次のお話

「ホームページ作成講座」に関連するオススメ記事

フリー漫画素材

無料で使える漫画素材です

ホームページの作り方

初心者向けHP作成講座

同人サークル専用HP

ホームページ作ります!

Copyright (C) 牛屋へ.com, All Rights Reserved.