Webデザインの楽しみ方
はじめに
白い画面の上に、店の名前を置く。その下へ短い紹介文を添え、写真を1枚広げ、右上に小さなメニューボタンを置いてみる。まだ公開されていない架空のサイトなのに、文字と写真の位置が整った瞬間、誰かが訪れてページを眺める様子まで見えてきます。
Webデザインというと、専門的なコードを書き、複雑なシステムを作る仕事を思い浮かべるかもしれません。「絵が描けなければ難しいのでは」「プログラミングを覚えないと始められないのでは」「高性能なパソコンや有料ソフトが必要なのでは」と感じる人もいるでしょう。
けれど、最初から本格的なサイトを公開する必要はありません。架空の喫茶店、好きな本の紹介、旅の写真をまとめるページなど、目的を1つ決め、文字や写真を見やすい順番へ並べるところから始められます。
Webデザインは、きれいな画面を作るだけの趣味ではありません。見る人が迷わず情報へたどり着けるか、スマートフォンでも読みやすいか、ボタンを押した先に何が起こるかまで考えながら、画面の中に小さな場所を作っていく楽しみがあります。
Webデザインの基本情報
主な楽しみ方 文字、色、写真、図形、ボタンを組み合わせ、目的に合ったWebページを設計する
おすすめの頻度 月2回前後。短い時間には、見出しやボタンのデザインだけを試せる
1回の制作時間 約90〜120分
短時間で楽しむ場合 約30〜40分から
主な制作場所 自宅の机や個人作業スペース
最初の制作物 縦にスクロールする1ページの架空サイト
最初に必要なもの パソコンまたはタブレット、インターネット環境、画面設計やサイト作成に使うツール
始めやすさ 無料ツールだけでも試せる一方、文字、色、操作、画面幅など複数の要素を同時に考える必要がある
天候の影響 ほとんど受けない。外出先で撮った写真や集めた情報を、自宅でサイトへまとめられる
Webデザインは、Webサイトの見た目だけでなく、情報の順番や操作の流れを設計する活動です。題名をどこへ置くか、メニューには何を入れるか、申込みボタンをどの場面で見せるかなど、訪れた人がページを使う時間まで考えます。
趣味として取り組む場合は、実際に運営する店やサービスがなくても構いません。架空の施設や催しを設定し、その人たちが本当に使うとしたらどのような情報が必要かを考えるだけでも、十分な制作になります。
完成した画面は、設計図のまま保存してもよく、サイト作成サービスを使って公開してもかまいません。HTMLやCSSを学び、自分で形にする方向へ進むこともできます。見た目を考えるところから公開まで、興味に合わせて範囲を広げられる趣味です。
Webデザインにかかる費用
すでにパソコンやタブレットを持っていれば、無料の画面設計ツールやサイト作成サービスを使い、追加費用なしで始められます。Webデザインには紙や絵の具のような毎回の消耗品がほとんどないため、費用の中心はソフト、教材、公開環境です。
手持ちの端末と無料ツールで始める費用 0円から
入門書やオンライン教材を用意する費用 1,000〜5,000円ほど
有料の画面設計ツールを使う費用 月2,000〜4,000円前後
有料のサイト作成サービスを使う費用 月1,000〜5,000円ほど
独自ドメインを取得する費用 年1,000〜5,000円ほど
小規模なサイトの公開環境 無料から月2,000円ほど
無料環境を中心に続ける年間費用 0〜10,000円ほど
有料ツールや独自ドメインを使う年間費用 20,000〜80,000円ほど
最初は、無料プランのある画面設計ツールを使い、1ページ分のデザインを作ります。無料プランでも、文字、図形、写真、ボタンを配置し、複数の画面をつないで操作を試すところまで進められます。
実際のサイトを作りたい場合も、無料のサイト作成サービスや公開環境があります。広告表示、ページ数、保存容量、独自ドメインの利用などに制限があることはありますが、初めての作品を公開するには十分な場合があります。
独自ドメインは、サイト専用の住所を持ちたいときに取得します。「自分の名前や活動名を使ったURLにしたい」「長く同じ場所でサイトを育てたい」と思ってから検討すればよく、練習段階では必須ではありません。
有料のテンプレート、写真素材、書体、アイコンもありますが、最初から購入する必要はありません。無料で利用できる素材と、自分で撮った写真、基本的な書体だけでも、見やすいサイトは作れます。
新しいパソコンや大型モニターも、初回の必須費用には含めません。手持ちの端末で1ページを作り、動作が重い、画面が狭くて作業しづらいと分かってから、必要な環境を考えます。
Webデザインをおすすめする3つの理由
1．情報が、歩いて回れる場所のようにつながっていく
Webサイトには、入口となるトップページがあり、そこから紹介、料金、作品、連絡先などのページへ進みます。部屋と廊下をつなぐように、情報同士の関係を考えられるところがWebデザインの面白さです。
たとえば、架空の植物店のサイトを作るとします。最初に季節の植物を見せ、その次に店の特徴を紹介し、育て方の記事へつなぎ、最後に営業時間と場所を置く。情報の順番によって、訪れた人が受け取る印象は変わります。
すべてを1画面へ詰め込むのではなく、必要なときに必要な情報が見つかるよう整理します。文字や写真を作るだけでなく、サイトの中をどのように歩いてもらうか考えられるのが、平面のデザインとは少し違う魅力です。
2．同じデザインが、さまざまな画面で姿を変える
Webサイトは、作ったときと同じ大きさで見てもらえるとは限りません。大きなパソコン画面、横幅の狭いスマートフォン、縦向きのタブレットなど、見る環境によって使える空間が変わります。
パソコンでは写真と文章を左右へ並べ、スマートフォンでは縦に重ねる。横長のメニューを小さなボタンへ変え、重要な申込みボタンを押しやすい大きさにする。1つの内容を、異なる画面へ合わせて組み替える工夫があります。
単に小さく縮めるのではなく、その画面で読みやすい姿へ整えるところに、パズルのような楽しさがあります。自分の端末だけでなく、違う大きさの画面を想像することで、デザインの見方も少しずつ広がります。
3．作ったものを、実際に動かして確かめられる
Webデザインでは、ボタンを押す、画像を切り替える、メニューを開く、次のページへ移るといった動きを試せます。静止した画面が整っているだけでなく、触れたときに迷わず使えるかを確かめられます。
設計ツール上で画面同士をつなぎ、試作品として操作することもできます。これをプロトタイプと呼び、完成したサイトを作る前に、画面の流れやボタンの位置を確認するために使います。
実際に動かすと、「戻る場所が分からない」「申込みボタンが見つからない」「同じ説明が何度も出てくる」といった問題が見えてきます。作って終わりではなく、触って直す時間まで楽しめるのがWebデザインです。
Webデザインとグラフィックデザインの違い
グラフィックデザインでは、ポスター、チラシ、書籍、パッケージなど、限られた面の中へ情報を配置します。Webデザインでも文字、色、写真、余白を扱う点は共通していますが、画面の大きさが変わり、押したり移動したりする操作が加わります。
ポスターなら、見る人は基本的に1枚の中で情報を読みます。Webサイトでは、メニューを開き、ページを移動し、入力欄へ文字を書き、必要に応じて前の画面へ戻ります。
そのため、見た目の美しさだけでなく、次に何をすればよいか分かることが大切です。装飾の少ない画面でも、情報が見つけやすく、ボタンの意味が分かれば、使いやすいデザインになります。
反対に、操作しやすくても、文字の強弱や色のまとまりがなければ、内容を読み取りにくくなります。グラフィックデザインの考え方と、Web特有の操作や画面変化を組み合わせる活動と考えると分かりやすいでしょう。
Webデザインとプログラミングは同じではない
Webデザインは、サイトの目的、情報の順番、画面の構成、見た目、操作方法を考える活動です。プログラミングやコーディングは、その設計を実際に動く形へ作るための方法です。
Webページの基本には、主に3つの役割があります。
HTML 見出し、文章、画像、リンクなど、ページの内容と構造を作る
CSS 色、文字の大きさ、余白、配置など、見た目を整える
JavaScript メニューの開閉、画像の切り替えなど、操作や動きを加える
コードを書かなくても、画面設計ツールを使ってWebデザインは学べます。サイト作成サービスを利用すれば、用意された部品を並べ、実際に公開することもできます。
一方で、HTMLとCSSの基本を少し知ると、なぜこの位置で文字が折り返されるのか、どこまで自由に配置できるのかが分かりやすくなります。最初から両方を同時に覚えず、デザインを先に楽しみ、必要になったところからコードへ進んでも構いません。
最初の作品は、1ページの架空サイトにする
初めての制作には、縦にスクロールする1ページのサイトが向いています。複数のページを作るより、上から下へ情報を並べることに集中できます。
題材は、次のような小さなものから選べます。
・架空の喫茶店
・好きな本を紹介するページ
・旅の写真をまとめたページ
・小さな作品展の案内
・植物の育て方を紹介するページ
・休日の散歩コース
・自分の制作物を並べる作品ページ
最初のサイトに必要な内容は、5つほどで十分です。
最初の画面 名前、短い説明、代表となる写真
特徴の紹介 何を扱うサイトなのか
主な内容 商品、作品、記事など
補足情報 場所、時間、利用方法
最後の案内 問い合わせ、申込み、別ページへのリンク
情報を増やす前に、上から順番に見たとき、何のサイトなのかが分かるかを確かめます。ページ数よりも、1つの入口から最後まで迷わず読めることを最初の完成目標にします。
画面を作る前に、誰が何のために見るか決める
Webデザインでは、色や書体を選ぶ前に、見る人と目的を決めます。
「近所で静かに過ごせる店を探している人へ、架空の喫茶店を紹介する」
「旅行を考えている家族へ、2日間の散歩コースを案内する」
「作品に興味を持った人へ、写真と制作内容を見せる」
このように1文へまとめると、必要な情報が見えてきます。喫茶店なら営業時間や場所が必要になり、作品紹介なら大きな写真や制作背景が大切になります。
自分が載せたいものだけでなく、見る人が知りたいことを考えるのがポイントです。長い紹介文を書きたくても、最初に店の場所を探している人には、住所や地図への入口を見つけやすくする必要があります。
制作途中で迷ったときは、「この人がこのページを開いたとき、次に何を知りたいだろう」と考えます。その答えが、情報を残すか削るかの基準になります。
内容を先に集めてから配置を考える
空の画面を開き、そこへ文章や写真を少しずつ足していくと、後から情報が収まらなくなることがあります。先に使う内容を集め、おおよその量を知ってから画面を設計します。
最初に用意するものは、次のような内容です。
・サイト名
・短い紹介文
・見出し
・本文
・写真やイラスト
・ボタンに入れる言葉
・住所や営業時間などの情報
・問い合わせ先
文章は完成稿でなくても構いませんが、実際に使う量に近づけます。「ここに文章が入ります」という短い仮文字だけで設計すると、本番の文章を入れたときに画面が崩れることがあります。
写真も、横長、縦長、正方形で配置しやすさが変わります。先に使う写真の形と枚数を確認し、それに合う構成を考えます。
架空のサイトであっても、実在する住所、電話番号、人物名を無断で使わないようにします。店名や内容を自分で考え、練習作品であることが分かる形にします。
サイトマップで情報のつながりを見る
複数のページを作る場合は、サイトマップを用意します。ここでいうサイトマップは、検索エンジン用のファイルではなく、どのページがどこへつながるかを紙へ整理した図です。
たとえば、架空の喫茶店なら次のように分けられます。
トップページ
├ 店について
├ メニュー
├ 店内の写真
├ 営業時間と場所
└ 問い合わせ
最初から細かなページを増やす必要はありません。内容の少ないページがいくつもあるなら、1ページの中にまとめたほうが読みやすいことがあります。
反対に、1ページが長くなりすぎる場合は、詳しい内容だけ別のページへ分けます。見る人がどこから入り、どの順番で進むかを考えながら、ページ同士をつなぎます。
ワイヤーフレームで骨組みを作る
サイトの内容が決まったら、色や写真を入れる前に、四角と線だけで配置を考えます。この簡単な設計図をワイヤーフレームと呼びます。
紙へスマートフォンほどの長方形を描き、上から順番に、ロゴ、見出し、写真、文章、ボタンを置きます。文字は横線、写真は四角で表せば十分です。
最初から美しい画面を作ろうとすると、書体や写真選びに気を取られ、情報の順番が後回しになりがちです。色のない骨組みにすると、何を最初に見せたいのかが分かりやすくなります。
1案だけを丁寧に作るより、少し違う案を3つほど描きます。
・写真を最初に大きく見せる案
・短い言葉を中心にする案
・内容の一覧を先に見せる案
並べて比べることで、目的に合う入口を選びやすくなります。
レイアウトは、見える順番を整える
Webページには、題名、文章、写真、ボタン、メニューなど、多くの要素が入ります。すべてを同じ大きさで並べると、どこから見ればよいか分かりません。
まず、画面を開いたときに最初に伝えたいものを1つ決めます。サイト名なのか、商品写真なのか、催しの日付なのかによって、目立たせる場所が変わります。
次に、関係する情報を近づけます。写真と説明文、日付と時間、料金と申込みボタンなどを近くへ置くと、内容のまとまりが自然に伝わります。
位置をそろえることも大切です。文章の左端、写真の端、ボタンの幅を少しずつそろえると、装飾が少なくても整って見えます。
余白は、残った場所ではありません。見出しの周囲を広く取り、内容のまとまり同士を少し離すことで、どこからどこまでが同じ話なのかを示せます。
文字は、雰囲気と読みやすさの両方で選ぶ
Webサイトの文字は、画面の大きさや端末によって見え方が変わります。特徴のある書体を選ぶことより、無理なく読めることを先に確かめます。
最初は、1つのサイトで使う書体を1〜2種類へ絞ります。題名には少し特徴のある書体、本文には形の安定した読みやすい書体を使う方法があります。
本文を小さくしすぎると、スマートフォンで読むときに拡大が必要になります。制作画面だけでなく、実際の端末へ近い大きさで確認します。
文章の横幅が広すぎると、行の終わりから次の行の始まりへ視線を移しにくくなります。大きな画面でも本文を端から端まで広げず、読みやすい幅に収めます。
行と行の間が狭いと窮屈になり、広すぎると文章がばらばらに見えます。文字の大きさだけでなく、行間と段落の間隔を一緒に調整します。
太字、色、下線を同時に使いすぎる必要もありません。重要な見出しは大きさ、リンクは色や形というように、役割ごとの見せ方をそろえます。
色は、役割を決めて使う
色は、サイトの雰囲気を作るだけでなく、ボタンや注意事項などの役割を示します。最初は、背景色、文字色、中心となる色、強調色の4つほどから始めます。
背景を明るくするなら、文字は十分に濃くします。淡い灰色の上へ薄い文字を置くと、雰囲気は柔らかくても読みづらくなることがあります。
強調色は、申込みボタンや重要なリンクなど、行動してほしい場所へ絞ります。同じ鮮やかな色を飾りとして多く使うと、どこが押せる場所なのか分かりにくくなります。
色だけで情報を区別しないことも大切です。入力の間違いを赤だけで示すのではなく、文章や記号を添えます。選択中のメニューも、色に加えて線や形を変えると伝わりやすくなります。
写真を使う場合は、その中にある色を1つ選び、見出しやボタンへ使うとまとまりやすくなります。多くの色を足すより、すでにある色を繰り返すほうが落ち着いた画面になります。
写真は、きれいさより役割を考える
大きな写真は目を引きますが、何を伝えるために置くのかを考えます。店内の落ち着きを見せたいのか、商品の細部を見せたいのか、人物の表情を伝えたいのかによって、必要な写真は変わります。
写真へ文字を重ねる場合は、空、壁、机など、比較的静かな場所を選びます。背景の模様が細かい場所へ文字を置くと、どちらも見えにくくなります。
画像の大きさにも注意します。高解像度の写真をそのまま何枚も使うと、ページの表示が遅くなることがあります。使用する大きさに合わせて画像を整え、必要以上に重いデータを載せないようにします。
写真が表示されない場合や、画像を見られない人のために、必要な画像には内容を伝える短い説明を付けます。ただし、飾りとして置いた模様や背景まで長く説明する必要はありません。
人物、店内、美術作品、商品などを撮影して使う場合は、公開できる写真かを確認します。自分で撮った写真であっても、写っている人や場所への配慮は必要です。
スマートフォンから先に考えてみる
多くの情報を置けるパソコン画面から作ると、スマートフォンへ縮めたときに要素が収まらなくなることがあります。初めての作品では、横幅の狭い画面から考える方法も分かりやすいでしょう。
スマートフォンでは、写真と文章を横へ並べる空間が限られます。写真、見出し、文章、ボタンを縦に重ね、読む順番を明確にします。
横長のメニューは、項目を減らすか、開閉できるメニューへまとめます。ただし、何でも隠すと必要なページを見つけにくくなるため、特に重要な入口は画面上へ残します。
ボタンは、文字が読めるだけでなく、指で押しやすい大きさと間隔を取ります。隣り合うボタンが近すぎると、別のものを押してしまうことがあります。
スマートフォンの画面だけで完成とせず、少し幅の広い端末やパソコンでも確認します。どの画面でもまったく同じ配置にするのではなく、それぞれで無理なく使える形へ変えます。
ボタンは、押した先が分かる言葉にする
「詳しくはこちら」というボタンだけでは、何について詳しく見られるのか分からない場合があります。
「メニューを見る」
「作品一覧へ進む」
「開催日を確認する」
「問い合わせ方法を見る」
このように、押したあとに起こることを短く書くと、次の行動を想像しやすくなります。
同じページの中で、同じ見た目のボタンには同じ役割を持たせます。ある場所では申込み、別の場所では画像拡大というように動きが変わると、使う人が戸惑います。
押せるものは押せるように見せ、押せない見出しや飾りとは区別します。色だけでなく、形、余白、カーソルや押したときの変化なども使えます。
外部サイトへ移動するリンクや、ファイルを開くリンクは、必要に応じて内容を分かりやすく示します。訪れた人が、予想しない場所へ突然移動しないようにします。
入力フォームは、迷う場所を減らす
問い合わせや申込みの画面では、何を入力する欄なのかを明確にします。枠の中へ薄い文字を置くだけでなく、名前、メールアドレス、問い合わせ内容などの見出しを付けます。
必須項目と任意項目も区別します。すべてを必須にせず、本当に必要な情報だけを求めると、入力する負担を減らせます。
入力内容に問題がある場合は、「間違っています」とだけ表示するのではなく、「メールアドレスの形式を確認してください」のように、直す場所を伝えます。
送信ボタンを押したあとも、送信できたのか分かる画面を用意します。同じ内容を何度も送ってしまわないよう、次に何をすればよいか示します。
練習作品では、実際の個人情報を入力させる仕組みを無理に作る必要はありません。見た目と流れだけを試すプロトタイプとして作る方法もあります。
アクセシビリティは、特別な人だけのためではない
Webアクセシビリティは、障害の有無や利用する環境にかかわらず、できるだけ多くの人が情報を使えるようにする考え方です。難しい基準をすべて覚えてから始めるのではなく、基本的な確認から取り入れます。
最初に見直しやすいのは、次のような部分です。
・背景と文字の色が近すぎないか
・本文を無理なく読める大きさにしているか
・見出しの順番が内容に合っているか
・画像の内容を必要に応じて文章で補っているか
・リンクの行き先が言葉から分かるか
・キーボードでも主な操作ができるか
・入力欄に分かりやすい名前が付いているか
・動画や動きが速すぎないか
おしゃれな見た目とアクセシビリティは、どちらか一方を選ぶものではありません。読みやすい文字、分かりやすい見出し、予想できる操作は、多くの人にとって使いやすいデザインにつながります。
ノーコードとコード、最初はどちらを選ぶか
ノーコードが向いている人
ノーコードは、コードを直接書かず、用意された部品を配置してサイトを作る方法です。
・まず画面の構成を楽しみたい
・短い期間で公開まで試したい
・写真や文章を中心にしたサイトを作りたい
・サーバーなどの設定を少なくしたい
・コードより先に情報設計を学びたい
このような人に向いています。
一方で、無料プランでは機能や公開先に制限があり、細かな動きや独自の仕組みを作りにくい場合があります。使いたい機能を増やすほど料金が上がることもあるため、公開前にプランの範囲を確認します。
コードが向いている人
HTMLやCSSを書いて作る方法は、仕組みを理解し、自分で細かく調整したい人に向いています。
・文字や要素の構造を理解したい
・細かな余白や配置を調整したい
・作ったものが動く仕組みに興味がある
・既成のテンプレートにない形を試したい
・将来、Web制作や開発へ広げたい
最初は、題名、文章、画像、リンクだけの小さなページを作ります。いきなり予約機能や会員登録のあるサイトへ進まず、1ページを表示し、スマートフォンに合わせて整えるところまで経験します。
両方を組み合わせてもよい
設計は画面設計ツールで行い、公開はノーコードサービスを使う。簡単なページはコードで作り、問い合わせ部分だけ外部サービスを利用する。目的に合わせて組み合わせることもできます。
どの方法を選んでも、最初に考えるのは、見る人と伝える内容です。技術の違いより、迷わず使える画面になっているかが大切です。
最初の1ページを作る流れ
1．題材と目的を決める
架空の店、作品紹介、旅の記録などから1つ選び、「誰へ、何を伝えるページか」を1文にします。
2．必要な文章と写真を集める
サイト名、紹介文、見出し、写真、営業時間などを用意します。初回は内容を5つほどに絞ります。
3．紙へワイヤーフレームを描く
スマートフォンほどの長方形を描き、上から見出し、写真、文章、ボタンを置きます。異なる配置を3案ほど試します。
4．画面設計ツールで形にする
最初は白、黒、中心となる1色だけを使い、配置と余白を整えます。写真や装飾は後から加えます。
5．パソコンとスマートフォンの画面を作る
同じ内容を、それぞれの横幅に合わせて並べ直します。単に全体を小さくするのではなく、読む順番を見直します。
6．ボタンをつないで動きを試す
メニューやボタンから、目的の場所へ移動できるようにします。押した先が予想どおりか、自分で最初から操作します。
7．第三者に触ってもらう
説明せずに画面を見てもらい、「何のサイトに見えるか」「次にどこを押すと思うか」を確認します。
8．必要な部分だけ修正する
すべての感想へ合わせるのではなく、複数の人が迷った場所や、目的が伝わらなかった場所を優先して直します。
9．画像やプロトタイプとして残す
公開しなくても、完成画面、制作日、工夫した点を保存します。次の作品と並べることで変化が見えます。
公開するときに考えたいこと
設計した画面を実際のサイトとして公開する場合は、公開先、URL、更新方法を選びます。練習作品なら、無料の公開環境やサイト作成サービスから始められます。
独自ドメインを使う場合は、取得費用だけでなく、毎年の更新費用を確認します。初年度だけ安く、次の年から料金が変わる場合もあるため、長く使う予定なら更新時の条件まで見ます。
サイト作成サービスやサーバーを選ぶときは、次の内容を確認します。
・無料期間や無料プランの範囲
・独自ドメインを使えるか
・広告が表示されるか
・保存容量や通信量
・データを外へ移せるか
・解約後にサイトがどうなるか
・問い合わせ窓口
・自動更新の有無
練習中のサイトを一般公開したくない場合は、限定公開やパスワード設定を使えることがあります。検索結果へ表示させたくない場合も、使用するサービスの公開設定を確認します。
素材、書体、文章の利用条件を確認する
Webサイトには、写真、イラスト、アイコン、書体、文章、動画など、多くの素材を使います。インターネット上で見つけた画像を、そのまま保存して使用できるとは限りません。
無料素材にも、使用できる範囲があります。
・個人サイトで使えるか
・商用サイトで使えるか
・画像を加工してよいか
・作者名の表示が必要か
・ロゴや商品として使えるか
・素材そのものを再配布していないか
利用規約を読み、入手元と使用日を記録しておくと、後から確認しやすくなります。
書体にも利用条件があります。画面上の画像に使う場合、Webサイトへ書体を組み込む場合、ロゴへ使う場合で条件が異なることがあります。
練習作品には、自分で撮った写真、自分で描いた図形、利用条件が明確な素材を中心に使うと安心です。特定の会社や商品と誤解されるロゴ、店名、紹介文を無断で使用しないようにします。
個人情報と安全を意識する
公開するサイトには、自宅の住所、個人用の電話番号、普段使っているメールアドレスなどを、そのまま載せないよう慎重に考えます。
写真には、自宅周辺の景色、郵便物、車の番号、位置情報などが含まれる場合があります。公開前に、意図しない情報が写っていないかを確認します。
問い合わせを受け付ける場合は、入力された情報を何のために使うのか、どのように扱うのかを考える必要があります。趣味の練習段階では、個人情報を保存する仕組みを自分で作らず、信頼できるサービスを使う方法もあります。
使用するサイト作成サービス、プラグイン、テーマなどは、提供元と更新状況を確認します。長く更新されていないものや、入手元が不明なものを安易に追加しないようにします。
公開したサイトは、作ったときのまま放置せず、ときどき表示やリンクを確認します。不要になったページや古い連絡先は、削除または更新します。
完成前は、見る人の環境で確認する
制作ツールの画面で整っていても、実際のブラウザーでは見え方が変わることがあります。完成前には、できる範囲で異なる環境から確認します。
・パソコンの広い画面
・スマートフォンの縦画面
・少し横幅を狭くした画面
・文字を拡大した状態
・画像の読み込みが遅い状態
・マウスを使わずキーボードで操作した状態
すべての端末を持っていなくても、ブラウザーや設計ツールの画面幅を変えて試せます。
リンク切れ、文字の重なり、写真の切れ方、押しにくいボタンを確認します。見た目だけでなく、目的の情報へたどり着けるかを最初から操作します。
制作内容を知らない人に見てもらうときは、細かい感想より、次のような質問が役立ちます。
「何を紹介するサイトに見えましたか」
「最初にどこを見ましたか」
「営業時間は見つかりましたか」
「問い合わせるなら、どこを押しますか」
具体的な目的を達成できたかを見ることで、修正する場所が分かりやすくなります。
長く楽しむための作業環境
Webデザインは、画面を見ながら同じ姿勢を続けやすい趣味です。1つの画面ができたとき、写真の調整が終わったときなど、工程の区切りで立ち上がります。
制作画面の表示が小さい場合は、顔を近づけて我慢せず、拡大して作業します。全体を見るときだけ縮小し、細かな文字や位置を調整するときは見やすい大きさへ戻します。
机と椅子の高さを整え、肩を上げたままマウスを動かさないようにします。マウスやタッチペンを強く握り続けず、手首を無理に曲げない位置へ置きます。
色や余白を長時間見続けると、判断が分からなくなることがあります。迷った案は別名で保存し、少し時間を置いてから見直します。
夜遅くまで画面を見続けるより、次に直す場所をメモして作業を終えるほうが、次回も始めやすくなります。完成を急がず、月2回の中で少しずつ画面を育てる方法もあります。
続けるほど変わる5つの楽しみ方
第1段階 1ページを最後まで形にする
最初は、架空の店や作品紹介を題材に、1ページの画面を完成させます。色や書体を増やすより、見出し、写真、文章、ボタンを上から順番に並べることを大切にします。
完成したら、パソコンとスマートフォンの大きさで確認します。最初の1ページを作ることで、自分が文字、写真、構成、操作のどこを特に楽しんだのかが見えてきます。
第2段階 見る人が迷わない流れを作る
次は、サイトマップやワイヤーフレームを使い、情報のつながりを考えます。題名を大きくするだけでなく、見る人が次に知りたい内容を近くへ置きます。
ボタンの言葉、メニューの順番、ページの長さも見直します。見た目を整えることから、使う人の動きを考えることへ楽しみが広がります。
第3段階 異なる画面と操作へ対応する
パソコン、タブレット、スマートフォンで配置を調整し、画面幅によって変化するデザインを作ります。メニューの開閉や画面の切り替えも加え、触れたときの分かりやすさを確かめます。
色の見え方、キーボード操作、画像の説明なども少しずつ見直します。特定の1画面だけでなく、異なる環境で使えることが制作の中心になります。
第4段階 複数のページやサイト全体を整える
トップページ、紹介ページ、作品一覧、問い合わせなど、複数のページへ広げます。書体、色、ボタン、写真の見せ方をそろえ、どのページへ移っても同じサイトだと分かるようにします。
共通して使う部品をまとめ、更新しやすい設計を考えるようになります。1画面の完成度だけでなく、サイト全体の一貫性と使いやすさを楽しむ段階です。
第5段階 実際の目的へつながるサイトを育てる
作品集として公開する、身近な活動の案内を作る、小さな催しの情報をまとめるなど、実際に使われるサイトへ広げます。公開後の反応を見て、読まれていない場所や迷いやすい操作を直します。
制作した画面を作品集へまとめたり、誰かのサイトづくりを手伝ったりすることもできます。仕事や収益化だけを目標にせず、自分の情報を自分で整理し、必要な人へ届けられることも大きな到達点です。
あわせて楽しみたい関連する趣味
グラフィックデザイン
グラフィックデザインは、文字、写真、色、図形を組み合わせ、情報が伝わる画面を作る趣味です。Webデザインに必要な文字の強弱、配色、余白、写真の扱いを、静止した1枚の中でじっくり試せます。
写真を撮る
写真を撮る楽しみを深めると、Webサイトで使う素材を自分で用意できるようになります。店や作品の雰囲気に合わせて、光、背景、構図を選ぶことで、既成素材では出しにくい統一感を作れます。
イラスト
イラストは、人物、動物、食べ物、風景などを、自分の線と色で表現する趣味です。アイコン、見出しの飾り、説明用の小さな図などを自分で作れると、サイトの目的に合った表情を加えられます。
白い画面の中に、誰かが歩ける道を作る
Webデザインでは、目立つ写真や新しい機能を増やすことだけが制作ではありません。大切な言葉を少し上へ置き、関係する情報を近づけ、次に押す場所を分かりやすくする。小さな選択を重ねることで、白い画面の中に、誰かが迷わず歩ける道が生まれます。
次の休日には、紹介してみたい題材を1つ決め、スマートフォンほどの長方形を紙へ描いてみてください。最初の画面に名前と短い言葉を置き、その下へ写真、説明、ボタンを並べる。上から指でたどり、自然に最後まで進めたとき、最初のWebデザインはすでに形になり始めています。
休日のよりみち帖では、気軽に試せるものから、少しずつ時間をかけて深めていくものまで、さまざまな趣味やレジャーを紹介しています。「次の休日は何をしよう」と迷ったとき、新しい楽しみを見つける小さなきっかけになれたらうれしいです。これからも思わず試してみたくなる趣味を丁寧に紹介していきますので、ぜひフォローして、次の記事も覗いてみてください。
ほかの趣味やレジャーも探してみたい方は、こちらの一覧から気になるものを覗いてみてください。
記事作成に使用している元情報や、データの整理方針についてはこちらで紹介しています。
