Webページをつくる

この記事は、これまでにWebページを作ったことがない方に向けて書いています。
普段は見るだけだったかもしれないWebページですが、いざ「つくる側」から眺めると、どんなことを考えながら形になっていくのか――その流れを、InterStoryFarmの制作を例にお話しします。

なお、作り始める前に整理しておきたい「目的・相手・印象」については、別の記事「ホームページを作る前に決めておきたい3つのこと」でお話ししています。
この記事は、その続きとして、実際に手を動かしていく段階の話だと思って読んでいただければと思います。

見やすいページと、そうでないページ

先に結論をお伝えすると、見やすいページには共通点があります。
作り手が「誰に・何を伝えたいか」を、作る前にはっきり決めている、ということです。

世の中には、本当に見やすくて、読み進むのに努力がいらないページがたくさんあります。

一方で、表示に時間がかかり、知りたい情報がどこにあるのかわからず、メニューを行ったり来たりするページもあります。
特に外出先でお店を探しているときなどは、営業しているのか、場所はどこか、メニューはどんな感じか――それがすぐにわからないと、あっさり諦めて他を探してしまいます。

この差は、見た目のセンスというより、作る前にどれだけ整理できていたかで決まることがほとんどです。

決めたことを、形にしていく

作る前に決めておいた「相手」と「印象」を土台として、制作の段階では、それをいよいよ具体的な形に変換していきます。

「この人に届けたい」という相手をまぶたに思い浮かべながら、その人が知りたいことを、その人に届く言葉で書いていく。
そして、信頼を得たいページ、気軽にフィードバックがほしいページなど、目的に合った「印象」を、画像・色・文字・文章のトーンでそろえていきます。全体の印象をそろえつつ、どこにアクセントをつけるかも考えます。

つまり前回決めておいたことを、ここで初めて目に見える形にしていく、ということです。

ライティング

Webページのテキストづくり「ライティング」で参考になるのが、『沈黙のWebライティング』（注1）という本です。
チャット形式で進み、ライティングの中身だけでなく、その裏でしっかりとしたストーリーが展開される、読み物としても面白い一冊です。

詳しくは本を見ていただくとして、ここでも大事なのは、届けたい人を思い浮かべながら、その人の心に響く書き方をすることです。
特に、最初に目に入る画像とキャッチコピーは、対象とする人に響くかどうかを十分に考えて、何度も作り直すのが普通です。

本文も、説明する順番、言葉の選び方、語尾の整え方といった細かな点を確かめながら、文章の長さ、漢字の量、改行の位置までを調整していきます。

演出はどこまで？

Webページの中には、動画などを使った派手な演出で、見る人に強い印象を与えようとするものもあります。
ただ、派手に動くページは、表示に時間がかかるわりに、思ったほど面白くならないことも少なくありません。
下まで読んでから上に戻るたびに同じ演出が再生されると、見返したい情報にたどり着く前に離脱されてしまうこともあります。
スマートフォンで見られることも多いので、なおさらです。

Webページは基本はシンプルに、それでいて見る人を飽きさせない程度の演出にとどめるのがよいと考えています。

一番伝えたいのは、苦労して作った演出ではなく、お客様にお届けしたい情報のはずですから。

いよいよ作っていく

準備ができたら、実際にページを作っていきます。

このサイトは、WordPressというWeb制作ツールの標準機能だけで作っています。
無料でページを提供している別のサイトでは、ノーコードツールを使っています。

どちらの場合も、用意された機能で「どう表示されるか」は、試しながら整えていく作業になります。

特にパソコンとスマートフォンでは見え方が変わるため、両方で確認しながら微調整していくのが欠かせません。
編集画面の見たままが、そのまま実際の表示になるとは限らないので、ここは地道な確認の積み重ねです。

一晩置いておく

昔から、資料を作ったら一晩置く、というのが自分には欠かせないプロセスです。
勢いで作った部分は、翌日に冷静に見直すと、まったく良くなかった、ということがあるからです。

Webページも同じで、一晩置いてから、「届けたい人に届きそうか」を何度も見直します。

お客様と一緒に確認する

ほぼ形になった段階で、お客様にも見ていただき、直したいところを一緒に洗い出して修正します。

ワイヤーフレーム（おおまかなレイアウト図）の段階でお客様に承認をいただいてから進める制作スタイルもよく知られています。
手戻りを防げる、理にかなった進め方です。

ただ、初めてホームページを作る方にとっては、線だけで作られたレイアウトを見ても完成イメージを持ちにくく、「これで進めてよいか」と聞かれても答えづらい、というのが実感ではないでしょうか？

そこでInterStoryFarmでは、ロゴや画像、全体の雰囲気を途中で少しずつ共有させていただき、ご相談しながら進め、ある程度形が見えた段階で、あらためて確認していただくようにしています。
最終段階で大きな手直しが出るリスクはありますが、その分こまめに方向をすり合わせることで、認識のズレが大きくならないようにしています。

公開、そしてその先へ

ここまでくれば、最後の微調整をして公開です。おつかれさまでした。

ただ、公開はゴールではなく、むしろスタートです。実際に見ていただきながら、少しずつ育てていくもの――そう考えています。

（注1）
沈黙のWebライティング: Webマーケッターボーンの激闘
https://web-rider.jp/bourne-writing/