誠のWebデザイン道

Webデザイン初心者の「わからない」を解決します！
全くの未経験から副業で月3万を目指す人へ
制作現場歴30年＋インストラクター経験を持つ師範が、学び方・デザイン・案件獲得の考え方を指南します。

[誠のWebデザイン道 @MakotoWebDesign]

駆け出しWebデザイナーの「わからない」を解決します！

副業にしようとWebデザインを始めたけれど、

「何から勉強すればいいの？」
「このデザイン、何かイマイチだけど理由が分からない」
「ポートフォリオって何を作ればいい？」
「案件に応募するのが怖い」
「提案文って何を書けばいいの？」

そんな「わからない」で手が止まっていませんか？

このアカウントでは、Webデザイン初心者がつまずきやすい「わからない」を1つずつ取り上げ、現場で培った経験をもとに解決していきます。

・Webデザインの基礎
・レイアウト、文字、色、余白
・ポートフォリオの作り方
・案件の探し方、提案の考え方
・クライアントとのやり取り
・副業で月3万円を目指すための実務

制作現場歴30年＋インストラクター経験を持つ「師範」が、初心者にも分かりやすく指南します。

[誠のWebデザイン道 @MakotoWebDesign]

@owW0kAGlWr70SPo 解決していて良かったです！

[誠のWebデザイン道 @MakotoWebDesign]

【今日の「わからない」】
デザインが素人っぽくなる原因がわからない
━━━━━━━
頑張ってデザインしているのに、なんとなく素人っぽく見える。
自分でもデザインがピシッとしていないことはわかるけど、どうすればピシッとするのかわからない。
そんなときは「センスがない」と落ち込む必要はありません。

初心者のデザインが素人っぽく見える原因は
・要素の位置や大きさ、余白などのルールがバラバラになっている
・装飾を施しすぎてゴチャゴチャ感が出てしまっている
の２点が考えられます。

まず確認してほしいのが
・文字や画像の位置がそろっているか
・余白の取り方がバラバラになっていないか
・見出しと本文にきちんと強弱があるか
・関連する情報が近くにまとまっているか
・色や装飾を使いすぎていないか
です。

Webデザインには
近接・整列・反復・対比
という「デザイン四大原則」があります。
まずこの4つを意識するだけでも、デザインはかなりピシッとなります。

特に初心者の方におすすめなのが「そろえる」こと。
左端をそろえる。
見出しと本文の位置をそろえる。
余白のルールをそろえる。
ほんの少しのズレでも、見る人は無意識に違和感を感じます。

また、初心者にありがちなのが「もっとデザインしなきゃ！」とどんどん装飾してしまうことです。
足し算のデザインは簡単なのですが装飾がごちゃごちゃしてしまい、どこが重要で、どこが補助的な情報なのかわかりにくいページになってしまいます。
デザインは「引き算」を意識してください。シンプルでも構わないところはシンプルに、逆に目立たせたいところをドン！と強調する。
この強弱で情報の重要度を表現することができます。

「なんとなく素人っぽい」と感じたらセンスを疑う前に
「そろっているかな？」
「強弱がついているかな？」
「関係性が強い要素が近くにあるかな？」
「装飾を足しすぎていないかな？」
をチェックしてみてください。

デザインは「センスがないと作れない」ものではありません。
基本のルールを知って、それを使いこなすこと。
これが上達への近道です。

そして、デザインに行き詰まったら散歩に出かけましょう！
一旦距離を置いてリフレッシュするとデザインを俯瞰的に見ることができます。

◆あなたの「わからない」を募集！
Webデザインを勉強していて「ここがわからないんだよなぁ」と思うことがあれば、ぜひコメント欄に書いてください。
今後の投稿で取り上げて回答します📝

[誠のWebデザイン道 @MakotoWebDesign]

こんにちは！
色使いが統一されていて伝わってくるイメージが明確ですしレイアウト、要素の強弱も良いと思いました。
ただ気になったのは小さくて読みづらい文字があるかもしれないなというところです。

私がディレクションする際は次のようにしてバナーの確認するようにしています。
1.バナーを設置する場所（例えばInstagram）のスクショを撮る
2.そのスクショの上に制作したバナーを貼る
3.その画像をブラウザまたはスマホ実機で表示して確認

こうすることによって実際にバナーを設置した時と同じような感じ見ることができます。
クライアントにデザイン確認に出す際にもこの画像もバナーと一緒に送るようにしています。

参考になれば幸いです！

[誠のWebデザイン道 @MakotoWebDesign]

こんにちは！
厳密に言えばHTMLはプログラミング言語ではないですがカテゴリ分けは気にしなくて良いと思います。このバンドはハードロックなのかヘヴィメタルなのかみたいなもんです（わかりにくくてすみません💦

HTMLだけでは面白くないですがCSSを書いて意図した通りに表示された時は嬉しくなります（この道30年経った今でもそうです）。

JavaScript、jQueryを使えるようになってページに動きが付けられるようになったらもっと楽しくなります！

頑張ってくださいね！

[誠のWebデザイン道 @MakotoWebDesign]

突然失礼します！
ポートフォリオ拝見しました。どのバナーも綺麗にまとめられており、ユーザーの視線誘導を考えて強弱がつけられいて良いなと思いました。
あえて気になった点を挙げるとすれば、小さくて読みづらい文字があるかもしれないなというところです。

私がディレクションする際は次のようにしてバナーの確認するようにしています。

1.バナーを設置する場所（例えばInstagram）のスクショを撮る
2.そのスクショの上に制作したバナーを貼る
3.その画像をブラウザまたはスマホ実機で表示して確認

こうすることによって実際にバナーを設置した時と同じような感じ見ることができます。
クライアントにデザイン確認に出す際にもこの画像もバナーと一緒に送るようにしています。

参考になれば幸いです！

[誠のWebデザイン道 @MakotoWebDesign]

【今日の「わからない」】
模写しているけど上達しているかわからない
━━━━━━━
参考サイトのデザインを模写してみるのはとても良い練習になりますね。
私は模写のことを「マネぶ」と呼んでいます。真似して学ぶ。この学ぶという点が重要です。

模写で身につけたいのは、単に「同じものを作る技術」ではなく「デザインを見る力」です。

例えば模写をするときに、
・なぜこことここで余白に違いがあるのか
・なぜこの文字が大きいのか
・この配色でユーザーにどんな印象を与えようとしているのか
・なぜこの写真をここに使っているのか
・情報がなぜこの順番で並んでいるのか
などを考えながら作ってみてください。

それがあなたのデザインの引き出しになり、デザインを発想するアイデアを増やすことに繋がります。
Webページのデザインを制作する時に「何も思い浮かばない」ということが減ってきたらそれが成長の証です。

模写は、完成品をそっくり作ることが目的ではありません。
「なぜ、このデザインになっているのか？」を考える練習です。
次に模写するときは、ぜひ「見る」ことを意識してみてください。

◆あなたの「わからない」を募集！
Webデザインを勉強していて「ここがわからないんだよなぁ」と思うことがあれば、ぜひコメント欄に書いてください。
今後の投稿で取り上げて回答します📝

[誠のWebデザイン道 @MakotoWebDesign]

【今日の「わからない」】
LPはどのくらいの長さにすれば良いのかわからない

LP（ランディングページ）は掲載したいことが多いので長くなりがちですよね。
しかし何px以内に収めなければならない、という決まりはありません。
大事なのは「長さ」ではなく、必要な情報を必要な順番で伝えられているかです。

LP作成で注意しなければならないことは
・訪問者を途中で飽きさせない
・ページ表示速度が遅くならないようにする
の2点です。

じゃあ飽きさせないにはどうしたらいいのか？
ストーリー仕立てでページを構成することです。
ファーストビューで「これは私向けの情報だ」と興味喚起、「もっと知りたい」と感じてもらって読み進める
というストーリー（訪問者の心の動き）を考えながらデザインすると良いです。

ページが長くなると、掲載する画像や動画などの素材も増え、ページ容量が大きくなりがちです。
表示速度が遅くなると、訪問者の離脱につながるので、画像の最適化なども意識しましょう。

クライアントにデザインを提案する際も上記２点を伝えてみてください。
「ちゃんと考えてデザインしてくれているな」と感じていただけると思います。

◆あなたの「わからない」を募集！
Webデザインの勉強をしていて「ここがわからないんだよなぁ」と思うことをぜひコメント欄に書いてください。
今後の投稿で取り上げて回答します📝

[誠のWebデザイン道 @MakotoWebDesign]

日常的に行うことができて、効果的にデザインスキルをアップすることができる練習法があります。

それは
「勝手にテコ入れ」
です。

「なんかイマイチだな」と思ったWebサイトに出会った際に、どこに、なぜイマイチと感じたのかを自ら分析して、「私だったらこうするのに」「こうすればもっと良くなるのに」というようなことを考えます。

そうすることによってデザインの引き出しを増やすことに繋がりますし、理由のあるデザインができるスキルを身につけることができます。

[誠のWebデザイン道 @MakotoWebDesign]

未経験からWebデザインで初案件を取るまでの流れは、大きく5ステップです。

1. Webデザインの基礎を理解する

まずは、ツールの細かい機能よりも、
Webページが何のためにあるのかを理解することが大事です。誰に向けて、何を伝えて、どんな行動をしてもらいたいのか。

ここを考えずに色や装飾から入ると、見た目は整っていても目的が伝わらないデザインになりがちです。

2. 見本を分析しながら練習する

良いサイトを見たときに「おしゃれ」で終わらせないこと。

・なぜこの順番なのか
・なぜこの余白なのか
・なぜこの文字サイズなのか
・なぜここにボタンがあるのか

こうやって意図を考えながら見ると、模写もただの作業ではなく実務に近い練習になります。

3. ポートフォリオ用の制作物を作る

最初から作品数を増やす必要はありません。
まずは、架空店舗サイトやLPなど、実案件に近いテーマで作るのがおすすめです。

大事なのは、作品を作るだけでなく、
・誰に向けたデザインか
・何を目的にしたのか
・どこを工夫したのか
・どこまで担当したのか
を説明できるようにすること。

4. 小さな案件に応募する

最初から高単価案件を狙わなくても大丈夫です。
バナー制作、LPの一部デザイン、画像差し替え、簡単なHTML/CSS修正など、小さな案件から経験を積むことが大事です。

初案件の目的は、大きく稼ぐことよりも、
お金をいただいて納品する経験を作ること。

5. 納品・修正対応で信頼を作る

案件は、取って終わりではありません。
返信の早さ、確認の丁寧さ、納期を守る姿勢、修正対応の落ち着き。こういう部分も、次の仕事につながる大事な実務力です。

Webデザインは、やみくもに勉強すると迷いやすいです。
でも、案件につながる順番で進めれば、初案件獲得までの距離はかなり短くできます。

[誠のWebデザイン道 @MakotoWebDesign]

Webデザインを副業にしたいなら、最初から全部できることを目指す必要はありません。

まず得たいスキルは、
・見やすく情報を整理できる
・目的に合った導線を考えることができる
・重要度を強弱で表現できる
・制作意図を説明できる
このあたりです。

初案件獲得に必要なのは、完璧さより安心感です。

[誠のWebデザイン道 @MakotoWebDesign]

初案件獲得に近づくために何か始めたいならまずはこの3つ。

・参考サイトを3つ選ぶ
・ファーストビューを分析する
・架空サイトのテーマを1つ決める

いきなり1ページ全部作らなくて大丈夫です。
まずは「見る」「考える」「小さく作る」から始めることです。

[誠のWebデザイン道 @MakotoWebDesign]

@Icemandesiyzvz コメントありがとうございます！
そうなんですよね、ポートフォリオは作品の掲載のみという方を時々見かけるのですが、勿体ないなと思います。
作品のみから制作意図を読み取るのもそれなりにスキルが必要になりますので。

[誠のWebデザイン道 @MakotoWebDesign]

未経験からWebデザインの初案件を目指すなら、ポートフォリオには「作品」だけでなく「説明」も必要です。
なぜなら、見る人は完成画像だけを見ているわけではないからです。
依頼者が知りたいのは、

・どんな目的で作ったのか
・誰に向けたデザインなのか
・どこを工夫したのか
・どこまで対応できるのか
・仕事として頼めそうか

という部分です。
たとえば、架空のカフェサイトを作ったとします。
ただ画像を載せて、

「カフェサイトを作りました」

だけだと、少し弱いです。でも、次のように説明があると印象が変わります。

「休日にゆっくり過ごせるカフェを探している20〜40代女性を想定しました」

「落ち着いた雰囲気が伝わるように、余白を広めに取りました」

「ファーストビューでは店内の雰囲気とコンセプトを伝え、下層ではメニュー、営業時間、アクセスへ自然に流れる構成にしました」

「スマホでも営業時間とアクセス情報を確認しやすいようにしました」

こう書くだけで、“考えて作っている人”という印象になります。

ポートフォリオに入れたい説明は、最低限この5つです。

1.制作テーマ
　何のサイト、何のバナー、何のLPなのか。

2.想定ターゲット
　誰に向けたデザインなのか。

3.目的
　来店、問い合わせ、購入、資料請求など、何につなげるためのデザインなのか。

4.工夫した点
　余白、文字サイズ、導線、写真の見せ方、スマホ対応など、意図して作った部分。

5.使用ツール・担当範囲
　Photoshop、Illustrator、Figma、HTML/CSS、WordPressなど。自分がどこまで担当したのか。

初心者のうちは、作品の完成度だけで勝負しようとすると不安になりやすいです。
でも、制作意図を言葉にできるだけで、「この人は目的を考えて作れる人だ」と伝わります。

ポートフォリオは、単なる作品集ではありません。
仕事を依頼する人にとっての“信頼材料”です。
だからこそ、作品を作ったら必ず説明までセットで用意する。
これだけでも、初案件獲得に向けたあなたの見せ方はかなり変わります。

[誠のWebデザイン道 @MakotoWebDesign]

これを意識するとデザインがピシッと決まる！
デザイン四大原則（４）「対比」

情報に強弱をつけ、重要な情報を目立たせることです。

たとえば、見出しを大きくする、ボタンの色を変える、装飾を加えて目立たせるなどです。すべての文字が同じ大きさ、すべての要素が同じ強さだと、見る人はどこに注目すればいいのか分かりません。

また、色で強弱をつけることも大切です。
ただ色を塗る塗らないだけではなく、基本となる色、アクセントとなる色をデザイン設計として決めなければなりません。

重要なのは、
「何を一番目立たせたいのか」
「どの順番で見てもらいたいのか」
を決めることです。
そのうえで、文字サイズ、色、余白、配置などを工夫し強弱をつけます。

[誠のWebデザイン道 @MakotoWebDesign]

これを意識するとデザインがピシッと決まる！
デザイン四大原則（３）「反復」

同じルールを繰り返すことです。
たとえば、見出しの大きさ、ボタンの形、余白の取り方、色の使い方などをページ全体、サイト全体で統一します。

全て違うバラバラなデザインにしてしまうと、見た目がバラバラになり読み手にとって情報の重要度が把握できず理解しづらいページになります。また、要素の役割が把握しづらく使い勝手が悪くなります。

同じ役割のものは、同じ見た目にする。
これだけで、サイト全体、ページ全体に統一感が出て使いやすくなります。

制作現場では、このサイトでは一つ一つの要素をどのように装飾するのかをまとめ、デザインルール化することがよくあります。

[誠のWebデザイン道 @MakotoWebDesign]

これを意識するとデザインがピシッと決まる！
デザイン四大原則（２）「整列」

こんなの当たり前だよと思われるかもしれませんが、これができていない駆け出しデザイナーが意外と多いです。

・左端をそろえる。
・上端をそろえる。
・要素を中央にそろえる。
・余白の取り方をそろえる。

こうした基本的な整列を意識するだけで、デザイン全体がピシッと引き締まって見えます。たとえ少しのズレであっても見る人は無意識のうちに感じとりますので注意が必要です。

逆に、左側をインデントすることで情報の上下関係を表現することができます。これも整列のテクニックの一つですね。

[誠のWebデザイン道 @MakotoWebDesign]

@zume_web そうなんですよねぇ。
「◯◯だと思ってました」という言葉を何度聞いたことか😅

書面という意味でいうと業務委託基本契約書もしっかりと読んでおくことが重要ですね。

[誠のWebデザイン道 @MakotoWebDesign]

これは本当に仰る通りで、細かいところまで取り決めておこうとすると面倒くさがる見積もりの金額しか見ていないクライアントも時々いますが💦そういったところほど後になって「思ってたのと違う」となりがちです。
私は「事前に決めておいた方がお互いに安心ですから」と説明するようにしています。

見積もり以外にも、オンラインでもオフラインでも打ち合わせで話し合って決めた内容は議事録としてまとめて「過不足や齟齬などございましたらご指摘ください」と確認してもらい同意を得ておくのも重要ですね。
そうすることで言った言わない論争を避けることができます。

[づめ＠Web制作 @zume_web]

見積もりを出すときに金額だけ先に固めて、"どこまでが含まれるか"の言語化を後回しにしてしまうことがあります。

公開後の文言修正は何回まで無料か。
更新の代行は含まれるのか。
問い合わせフォームの項目を増やすときは追加料金になるのか。

曖昧なままにしていた部分ほど、あとになって「思っていたのと違う」につながりやすいです。

最初に線引きをはっきりさせておくほうが、結局はお互い気持ちよく進められると気づきました。

金額も大事ですがお客様に安心して利用してもらえる仕組みを作っておくことのほうがもっと大切です。

#Web制作 #中小企業 #ホームページ制作 #Webデザイン #見積もり