【webデザイン迷子さん必見】ホームページ制作が爆速で上手くなるコツ７選

• 頑張ってるのにイマイチ納得したサイトが作れない
• コンテンツの深め方がわからない

そんなwebデザイン迷子さんも今日で変われます！

第一選：チャットGPTと仲良くなる

まだ使ったことがない方は
この動画をみ終わったら今すぐ始めてください。
チャットGPTは文章生成AIですが、
文章を作ってもらうだけではもったいないです。

自分が知らない業界の案件では尚更、
めちゃくちゃ頼もしいパートナーになりますよ。

特に、次の３つの場面で効果的です。

１　必要なサイトコンテンツを確認する

webサイトに載せる内容は、
ある程度の王道が決まっています。
例えば、chatGPTに
こう質問してみてください。

「○○業界のwebサイトに必要なコンテンツを教えて」

実際に具体的な業界名を入れて
chatGPTに聞いてみましょう
「介護業界のwebサイトに必要なコンテンツを教えて」

すると、このように
非常に細かく、
どんな内容を盛り込むべきかを教えてくれます。
この方法はすごく簡単なので
誰でも今日から実践できますよ！

２　ユーザーのお悩みリサーチ

どの業界の人であってもリサーチは超重要。
ただ、私たちwebデザイナーにとっては
「お客様にとってのお客様」の悩みを
調査することなので
結構難しくないですか？

業界経験がないと
自分の想像力だけでは
正直、カバーできません。

そんな時に大活躍する質問例がこちら

「○○（サービス）をお願いしようとしている人が、
サービスを選ぶポイントは何ですか？」

「（○○（サービス）をお願いしようとしている人は、）
どんな悩みを持っていますか？」

「（○○（サービス）をお願いしようとしている人は、）
どんな理想を叶えたいと思っていますか？」

質問する時は
「５個教えて」というように
具体的な回答数を付け足すのがおすすめです。

具体例をお話しますと、
私は最近、訪問看護のサイトを
制作させていただきました。

医療業界の経験もありませんし
実際に自分の近くで訪問看護の
サービスを使ったことがなかったので
知識も経験も全くの０。

自分の頭の中だけでは想像力が限界だったので
このリサーチ方法が効果抜群。

実際にchatGPTに入力すると
このようにたくさんの回答がもらえました。
全体像を把握するにはもってこいの方法。
まだ使っていない方は
無料でできるのでぜひ活用してみてくださいね。

３　ユーザーへの訴求方法

キャッチフレーズや、
サービスの打ち出し方を考えるときに
次の質問が役に立ちます。

「○○（サービス）を依頼しようとしている
△△さん（利用者）は、
どんな声がけをされると嬉しいですか？」

具体的な例で言うと
「訪問看護を依頼しようとしている高齢者のご家族は、
どんな声がけをされると嬉しいですか？」

また、ターゲットを変えると違う返答ももらえるので
思いつく言葉を入れてみて
その中からピンときた回答をピックアップしましょう。

このようにchapGPTを活用すると効率的にリサーチできます。

ただし、ここで注意点。

chatGPTは非常に優れたAIですが、
あくまで統計的なもの。
妄信しすぎずに、
俯瞰した全体像だと思っておきましょう。
AIは一般論は得意ですが
クライアントさんだけの
オリジナルなエピソードまでは踏み込めません。

chatGPTだけに頼っていると
血が通っていないサイトになる恐れあり。
リアルさを感じられるサイトにするためにも
chatGPTと仲良くはするけど、
クライアントさんの独自ネタを
掘り出すことを忘れないでくださいね。

「木を見て森を見ず。森を見て木を見ず。」
と言う言葉があるように
chatGPTで全体像の視点を持ちつつも、
クライアントさんのオリジナリティを表現する。

このことに注意できれば、
サイト全体のバランス感覚を養うことができます。

２　競合サイトの観察と言語化

第２選、競合サイトの観察と言語化

１つのサイトを作るときは、
最低でも３つの競合サイトをピックアップ。
そして次の５点を意識して観察してみましょう。

①ファーストビューの画像とキャッチフレーズ
②トップページの構成順
③ヘッダーとフッターのメニュー項目
④お申し込みボタンの設置場所
⑤想定されるターゲット

実際に私はwebサイトのご依頼をいただく度に、
それぞれの業界で3つ以上のサイトを調べて
スプレッドシートに書き出しています。

そして、今お話しした「サイト観察」が終わったら
次は自分が感じたことを言語化します。
調べたサイトの良い点とイマイチな点を
評論家になったつもりでコメントしましょう。

「評論とか何様だよw」

と突っ込まれそうですが
ここは遠慮も忖度もすることなく感じたこと正直に書きましょう。
誰かに見せるわけではなく
自分へのメモにするだけです。

これをするだけで次の７つものメリットを得られます。

①アイデアの幅が広がる
②漠然とした理解を具体化できる
③問題解決能力が上がる
④客観的視点が持てる
⑤サイトの見本をストックできる
⑥次回同業種サイトを作るときに圧倒的に時短できる
⑦クライアントへの提案根拠になる

デメリットはただ一つ
時間がかかること

やってみるとわかりますが
結構時間かかるんですよ。

でもここに時間をかけずに
見切り発車してしまったら
途中段階で迷子になり、
行き当たりばったりになりかねません。

今からちょっと耳がいたい話をします。
サイト制作って
スクールで教えてもらうようなトレースだったり
架空サイトの課題をすれば
作れるようになるわけではないんです。

実際に使われているサイトを隅々まで見て
それを自分が制作するときにどう活かせそうか。

自分でリサーチして考えた視点は、
経験値としてじわじわ積み上がっていきます。

観察したものを言語化する力は、
フリーランスのwebデザイナーには
非常に重要な能力。

確かに今は優秀なAIが文章を作ってくれる時代です。
だからこそ、言語化を怠ってしまう人も多いので逆にチャンス。
自分自身が感じたことを
自分の言葉で表現してアウトプットすることで
理解をより深めつつ、他のデザイナーとの差別化ができます。

３　真似てみる

「学び」の語源は「まねび（真似び）」です。
実は私、日本語教員免許を持っていて、

「まねび」は「まねる（真似る）」に由来し、
何かを真似る、模倣するという意味を持ちます。

昔の教育は、
先生の行動を見て模倣することで
技術や知識を習得していました。

実際、デザインの勉強をされた方は
まず最初に教わることだと思いますが
デザインの基本は
「構成参考」と「配色参考」を組み合わせること。

サイト制作においても
バナーやフライヤー制作と同じように
この２つ（「構成参考」と「配色参考」）を守れば、
ある程度見栄えがちゃんとしたサイトができます。

真似する時のポイントは次の４点

①構成

先ほど第２選でお伝えしたように
競合サイトをリサーチして
どんな構成で組み立てられているかを参考にしましょう。

特に真似したいサイトを見つけたら、
マインドマップに書き出して
構成を洗い出します。
より視覚的に理解でき
全体像を把握しやすくなりますよ。
ちなみに私はいつも
「マインドマイスター」というツールで
マップを作っています。
無料版からでも十分に活用できるので超おすすめです。

②配色

センスなんて関係ありません。
真似するだけ。
見つける方法は簡単です。

「配色参考」でググるだけ！

こんなにたくさんの参考サイトが出てきます。

少し色の応用編になりますが、
戦略的に色を使っていきたい方は
色彩心理学の本を読んでみるのもおすすめです。

私も営業マン時代に
自分を演出する手段として
色を戦略的に取り入れていました。

この考え方は、サイトの印象作りでも同じこと。

色は心理的に訴えかける効果があり、
書籍もたくさん出ています。
非常に奥深いので知識を持っていて損はありません。

③テイスト

サイトでイラストやあしらいを
使うこともよくあるので
テイストは統一させましょう。

イラストACなどの素材サイトで
ダウンロードする際は、
できれば同じイラストレーターさんの
ものを使うのがベストです。

④画像

「なんか雰囲気が素敵だな」と思われるサイトには
デザインを施された画像が使われています。

見本にしたいサイトでどんな画像が使われているかを確認し、
良い部分を取り入れていきましょう。

綺麗な画像が用意できると
コードの知識がなくても
見栄えの良いサイトが作れます。

ここでお話ししたように
「真似る」というのは最高の学びの手段。
ただし、学びの手段であって
実際にサイトを作っていく場合は著作権・肖像権は絶対厳守。
完全に丸パクリにならないように
アイデアの引き出しとして使うようにしましょうね。

４　心を動かされた言葉をストックする

第4選、「心を動かされた言葉をストックする」

「え？デザイナーなのに言葉？どうゆうこと？」

と思った方もいるのではないでしょうか。

webサイトであっても、
基本は人と人とのコミュニケーションであることを
忘れてはいけません。

大前提、人の心を動かすのはデザイン以上に言葉です。

「デザイナーがそんなこと言っていいんかい！」
って思われそうですが。

私はリクルートで広告を9年間経験し
その後webライティング・アフィリエイトブログを経て
webデザイナーになりました。

そんな私だからこそ、言葉の大切さを伝えたい。

Web業界では有名な著書
『沈黙のwebマーケティング』でも

「人は論理で納得し、”感情”で動く」とあります。

人が行動するのは感情が動いた時です。
クライアントさんのビジネスに役立つwebサイトを作るコツ。
それは、感情を動かす言葉を効果的に配置し、
大事な言葉を演出するためにデザインしていくという考え方。

私は、ストライカーは言葉で、
デザインはシャドーストライカーだと思っています。

言葉とデザインがお互いに尊重し合ったバランスで
webサイトは相乗効果を発揮。

じゃあ実際に、どうすればいいのか。
それは、デザイナー自身が心が動く経験を
日頃から意識するのが近道です。

本や映画、ドラマ、ドキュメンタリー、
なんでもいいので
「どういう時に、自分は感動したのか」
「どんな言葉が響いたのか」
「なぜ響いたのか」

客観的に人間の感情を捉えることで
日頃の娯楽の中からでも
スキルアップに繋げることができます。

言葉のストックは多いに越したことありません。
クライアントさんの中には
言葉にするのが苦手な方も、実際に多くいらっしゃいます。
ヒアリングしながら一緒に言葉を掘り出していく中で、
ストックした言葉を織り交ぜていくと
想いを表現する時に非常に役立ちますよ。

フリーランスのwebデザイナーは
言われたことを忠実にこなすだけでは
差別化できません。

ユーザーの気持ちを理解した上で
クライアントさんのセールスに寄り添う提案をするためには
こういった細かい積み重ねから差が生まれます。

５　自分の消費行動を客観的に観察して言葉にする

第5選、「自分の消費行動を客観的に観察して言葉にする」

第4選でお話しした「言葉のストック」と同じく、
言語化がポイント。
Webサイトは、アート作品を作っているわけではなく
クライアントさんのセールス道具です。

人が物を買うには、なんらかの理由が存在します。

「これを買ったら、○○が実現できそう」
という叶えたい未来があるはず。

まずは一番身近なサンプルとして
自分の消費行動を言語化してみましょう。

この時に、メリットとベネフィットの２つの視点で
消費行動を振り返るのがポイントです。

「メリットとベネフィットって、どう違うの？」
実は営業を始めたばかりの私は、この違いがイマイチ理解できず
商談でひたすらメリットばかりを伝えて惨敗した苦い経験があります。

違いは、
メリットはそのサービスを受けることで
直接得られる利点。
ベネフィットは、サービスを受けたことで
結果的に得られる利益や恩恵。

叶えたい願望は、ベネフィットの方です。

消費行動の具体例を出すと、
私は起業を決意したごくごく初期に
イメージコンサルを受けました。
この時の私の心情は
「フリーランスになるからには人との交流も多くなる」
「できるだけ良い印象を残したい」
「でも何をしても全然垢抜けない」

このように悩んでいました。

イメコンで得られるメリットは
パーソナルカラーや顔タイプ診断、骨格診断などの
ファッションに関係するアドバイス。

叶えたいベネフィットは
「似合うメイクやファッションを着て自信を持てる」
→「自信が持てたらどんどん交流していけそう」
→「そうなったら人脈も増やせそう」

「素敵な人という印象を残せる」
→「印象に残せたら紹介がもらいやすそう」

このように、メリットのその先にベネフィットがあります。

ではここから、もっと具体的に消費行動を振り返ってみますね。

イメコンを受けたいという気持ちは固まったので
誰のサービスを受けるかを検討する段階に入ります。

数あるイメコンさんの中から一人を選びました。

なぜ、その方を選んだのか。

「ブログもSNSも頻繁に更新されていて
活動の様子がすごくわかりやすかった」
「メルマガでお客様とのエピソードを
多数ご紹介されていて、
お客様一人一人を大切にされる人だと思った」
「ビフォーアフターの事例が多かった」
「イメコンを受ける人は
みんな元々素敵な人だと思っていたけどビフォーは違った」
「じゃあこの人にお願いしたら私も変われるかもしれない！」

このように、自分自身の思考の跡を辿って
書き出してみましょう。

今の私の消費行動の振り返りだけでも
webサイトに活かせそうなネタがたくさんありましたよね。

人間の脳は考えるのにエネルギーが必要なので
ついつい省エネモードになりがち。
無意識に購入した物であっても
何かしら魅力を感じて、
何かを叶えたいから買っているはずです。

自分の思考回路を振り返ると
言語化の訓練にもなりますし
消費行動のサンプルにもなるので
一石二鳥。

クライアントさんのビジネスに
貢献できるサイトを作るには
これをやるかやらないかだけで
大きな差が生まれます。

ぜひこの動画を見終わった後に、
先月買ったものの振り返りをすぐやってください。

６　人に見せてユーザーテストをする

第６選、ユーザーテストをする。

作ったらweb制作とは全く関係のない人に
サイトを見てもらいましょう。
お友達や、家族に協力してもらえるといいですね。

これをするメリットは次の３点

１、自然な反応がもらえる

２、正確な第一印象を確認できる

３、見落としを防げる

関係ない人に見てもらえると
web制作やサービスに対しての予備知識がないので、
偏見なく自然な反応がもらえます。
予期せぬ動きをする可能性も大いにあり。
「想定外の反応を、想定内にする」ためにも、
ユーザーテストは非常に役に立ちます。

具体的なチェックポイントは次の５点
１情報量
２操作感
３雰囲気
４文字の見やすさ
５誘導のわかりやすさ

この5点のフィードバックをもらえると良いですね。

webサイトは機能してこそ価値があります。
ユーザーテストで生の声をもらえると
制作にかなり活かせますよ。

ユーザー目線は超重要です。

７　WordPress職人を目指さない

第7選、WordPress職人を目指さない

ツールを扱えるスキルは大前提としてもちろん必須です。

ここで私が言いたいのは、目的に対して
ハイスペックとオーバースペックを見誤らないということ。

WordPressはかなり奥が深く
テーマの開発までできる力は職人技です。

上を見れば見るほどにキリがなく

「自分はまだまだだ」
「こんな私なんて」

と、かつての私は
上を見ては勝手に自滅。

そんな過去の私に、声を大にして伝えたい。

「WordPress職人を目指すな！」

多くの場合でwebデザイナーがサイトを作る目的は
クライアントさんの売り上げUPに繋げること。

ここで大事なのはWordPressの職人的知識ではなく

・セールス視点やユーザー視点を取り入れる力

・クライアントさんの想いに共感し、言語化する力

・当事者意識を持ちつつ客観的な視点を持つ力

実績がないうちは、ついつい
スキル不足のせいだと考えがちですが

実際に私はスキルがまだ浅い1年目のうちから
お申し込み効果が5倍になったサイトを作ってきました。
クライアントさんの売り上げアップに
貢献できるWebデザイナーは
市場価値が自然とUP。

また、効果が出たサイトを作れた実績は
何よりも自信につながり、
この先フリーランスとして仕事を獲得していく
強力な武器になります。

エンディング

フリーランスは制作会社のように
仕事が分担されているわけではないので
提案力から制作スキル、言語化能力までの総合戦です。

これらのコツは私が未経験で
デザインを始めてから実行してきたポイントなので
非常に再現性が高いです。
あなたも、爆速でフリーランスとして稼ぎたいなら
私の公式LINEとお友達になってください。

今なら、WordPressで
月収30万円を稼ぐロードマップをプレゼント中。
また、サイトをオシャレにするCSSレシピ、
効果を最大化するwebサイトの解説動画も
限定配信中。
さらに、今だけ無料で
個別カウンセリングも行っています。
お悩みを解決して、
今後のプランニングを一緒に考えていきましょう。

まだの方は必ず概要欄をチェックしてくださいね。
今日も最後までご覧いただきありがとうございました。