魅力的な小説サイトをつくろう!トップへ戻る

[3]まずは設計図を書こう

紙にレイアウトを書いてみよう

 次にサイトのイメージ作りの作業に入っていきましょう。こちらもまだパソコンに向かう必要はありません。紙に鉛筆で、こんな感じで文章が入って、このあたりにこんな画像が入って、メニューはここ、のように書いてみましょう。このレイアウト作りの下書き作業を「ラフを作る」といいます。
 書籍や雑誌を作るときも同じ作業をします。雑誌の場合は雑誌の文字数、段組に合わせて升目のついたレイアウト用紙があるので、そこに鉛筆で書き込みます。このときに記事の大見出しや中見出し、小見出し、イラスト(写真)もアタリで入れますので、それと同じようにWebサイトを本番で作るつもりで書いてみるといいでしょう。私はいつもプリントに失敗した紙などの裏に鉛筆でラクガキ感覚で書いています。

 ラフを作るのは以下のような手順で進めていきます。まずはどんなページを作りたいか、自分が格好いいと思っているWebサイトをお手本にそれをまねして書いてみるといいと思います。好きなサイトが自分の作りたいサイトであることが多いはずです。

(1)ラフはコーナーごとに
 レイアウトはコンテンツや目的によって異なるはずです。例えばトップページと小説本文がまったく目的も内容も異なるのはおわかりですね。また、イラストのページと文章メインのページも異なります。少なくとも以下の何種類かレイアウトの異なるものを書いてみましょう。
 例えば上のメニューの例を取るならば、Webサイトの入り口であるトップページを含め、合計9種類は確実にラフを描いたほうがいいでしょう。またこのときに、どんな要素(画像、文章)が入るか、色はどれにするかなど、大まかなイメージを固めておきます。ラフに直接メモのように書き込んでおくのもいいと思います。

○トップページのラフ
あなたのWebサイトの入り口、玄関とも言えるページになります。好きなWebサイトをまねてこ〜んな感じ、というように書いてみましょう。
【ここで必要な要素の例】:サイトのタイトルロゴ(ここで仮決めしておくといいでしょう)、自作のイラストや写真などトップページのカットとして使えるような画像、最終更新日、サイトの説明文など

○小説ページのトップページ
メインコンテンツである小説ページのトップです。これも最初のうちは好きな小説サイトをお手本にしてみるといいでしょう。
【ここで必要な要素の例】:小説のタイトルロゴ、自作のイラストや写真などトップページのカットとして使えるような画像、最終更新日、小説の説明文など

○小説本文
小説本文が掲載されるページです。文章がメインになりますから、トップページに比べて使う要素はぐんと少なくなるでしょう。
【ここで必要な要素の例】:小説タイトルのテキスト、本文など

(2)レシピの感覚で素材を集めよう
 こんな調子で各コーナーのラフができあがったと思います。この次からやっとパソコンの出番です。ですが、いきなりページを作り始めることはしません。各々のページで必要な要素を先にひとところに集めておきましょう。
 まず必要なのは画像ですね。インターネット上には無料で使えるステキな素材集を配布しているサイトが数多くあります。検索エンジンなどで「無料素材集」といったキーワードで検索すれば、星の数ほどの無料素材配布サイトが見つかります。また、市販されている書籍や雑誌などにもホームページ作成のための画像がCD-ROMに収録されていますし、お使いのホームページ作成ソフトにもたくさんの画像が付属しています。その中から気に入ったものを使わせていただきましょう。あ、これいいなと思ったらとりあえずダウンロードしてきて、いろいろ見比べながら吟味していくのも楽しいものです。
 自分で作れる人は、先ほどラフを書いたときにイメージができあがっているでしょうから、それを元にグラフィックソフトで作成・加工しましょう。
 次にサイトに使うコーナー説明文や導入部分(リード)などの文章です。いきなりホームページ作成ソフトなどで書き始めるのもいいのですが、ここはテキストエディタで先にテキストを作っておき、ホームページ作成ソフトにコピー&ペーストで持ってくるほうが作業的に早いでしょう。書きためておいたり書き直したり、ステキなリードを作っておきましょう。

Back<< | トップページへ | >>Next

このサイトと管理人について| 掲示板

(c)Studio Mercury, You-zo Hiwatashi All Rights Reserved. 1999-2003