[0:00]はい、皆さんこんにちは。海外住Webデザイナーのあやかです。今回は、初心者でも簡単にホームページを作成する方法をデザインから実装まで完全解説していきます！ この動画を最後まで見れば、あなたもFigmaでデザインが作成できるようになり、WordPressとElementorを使って本格的なホームページを作れるようになります！ デザイン初心者の方でも大丈夫です！私がしっかりと解説をしていくので、この動画を見ながら手を動かしていただくだけでホームページが完成します。 ぜひ一緒に進めていきましょう！ まず完成品はこんな感じです！Webデザイナーのポートフォリオを想定しています。 これから案件を取っていきたいという方にぴったりな情報を余すことなくご紹介していきます。そしてデザイナーであるからこそ、デザインも魅力的なものにしていきます。 この動画では4つのステップでホームページを作成していきます。まずステップ1、情報の整理。掲載する情報を決め、構成を練り、文章を作成していきます。 ステップ2、Figmaでワイヤーフレームを制作。ワイヤーフレームとはおおまかなレイアウトを組んだもののことで、デザインをする前の設計図のようなもの。 ステップ3、Figmaでデザインを作成します。ここがデザイナーとしての一番の力の見せどころです。 そしてステップ4、WordPressとElementorでサイトを実装していきます。この流れに沿って進めることで、デザイン初心者でも迷うことなく本格的なサイトを作れるようになります。 特にデザイン力にフォーカスした内容になっています。今の時代、ありふれたデザインでは、他のサイトに埋もれてしまいます。 この動画では相手に伝わりやすく、印象に残るデザインをどう作るのか、そのプロセスをプロの目線で細かくお見せしていきます。 デザイナーを目指している方はもちろん、お金をかけずに自分でホームページを作りたいという方にもぴったりな内容になっています。 ぜひ最後までご覧いただき、一緒に魅力的なホームページを作っていきましょう！それでは早速始めていきます！
[1:50]そもそもホームページとは？というところからお話をしていきたいと思います。 ホームページとは伝えたい情報を分かりやすく伝えるためのものであり、インターネット上の名刺やお店のような役割を果たします。 個人や企業が自分自身や商品、サービスを広く知ってもらうために利用するものです。ホームページは様々な目的で活用されています。 例えばフリーランスの場合であれば、自分のスキルや実績を紹介するための「ポートフォリオサイト」として活用されます。 例えばデザイナーやライターが自分の作品や経歴を載せることで仕事の依頼を受けやすくします。 店舗や小規模事業の場合は、オンラインのお店として使います。営業時間、メニュー、所在地などを載せて来店や問い合わせを増やすことができます。 例えばカフェや美容室の情報が簡単に見つかるホームページを想像してみてください。大企業やブランドの場合は企業のイメージを伝えるための「ブランドの顔」として機能します。 商品やサービスの情報網羅して信頼感を築くために活用します。例えば人気ブランドの公式サイトで商品紹介や会社の姿勢を知ることができます。 ホームページは難しく考える必要はないです。自分や自分のビジネスを誰にどのように知ってほしいのかを考えるところから始めて、シンプルな形で情報を伝えるのがポイントです。
[3:14]それでは「1. 情報の整理」から始めていきます。WordPressを使ったホームページ制作の情報はYouTube上にもたくさんあるのですが、多くの場合はいきなりWordPressでの制作に入ってしまうことが多いように感じます。 ですが実務案件でしっかりと成功するホームページを作成するためには、まずサイトの目的やターゲット、全体の構成やデザインをしっかりと計画することが最も大事です。 ホームページはただ単に情報を並べるだけ、デザインが奇麗なだけでは不十分です。閲覧している方にとって直感的で理解しやすいデザインであることが鍵になります。 そのためには最初に掲載する情報を整理してそれを基に具体的な構成とデザインを設計しておく必要があります。この事前準備によって制作中の迷いを防いで、完成後の修正作業も大幅に削減することができます。 情報整理と聞くと難しく感じる方もいるかもしれませんが、安心してください！この動画では実際に私が現場で使用している『ホームページ設計書テンプレート』を活用していきます。 このリストを使えば初心者の方でも穴埋め形式で埋めていくだけで簡単にホームページ制作に必要な情報を整理することができます。
[4:41]ではここからホームページの設計書テンプレートを使って情報を整理していきます。 まずホームページの目的です。ホームページを作る目的を必ず明確にしてください。具体的な目標を設定することで制作中に迷うことがなくなります。 記入の例としては自分のポートフォリオを見てもらって仕事の依頼につなげたい。自社のサービスや商品を知ってもらって購入してもらいたい。ブログを通してファンを増やして広告収入を得たい。
[5:10]今回の場合であればポートフォリオを想定しているので自分のポートフォリオを見てもらって仕事の依頼につなげるとい目的です。
[5:24]次にターゲットです。主な訪問者の属性や特徴を想定します。誰に何を伝えたいのかを具体的にイメージすることが重要です。 今回の場合はポートフォリオサイトなのでホームページの制作を依頼してくれる方に見てほしいです。経営者や同業の方に見てほしいというのがそこにあるので、今回ピンポイントで設定するとしたら30代経営者、男性をメインのターゲットにしようかなと思っております。 地域に関しては一旦日本国内で特に都心部、東京だったり地方でも中心部に住んでいるような方で勢いのあるスタートアップ企業や中小企業の経営者がメインのターゲットになるかなと思います。
[6:23]訪問の目的として、どうしてこのサイトに入ってきてくれるのか？っていうところで言うと、信頼できるデザイナーを探している案件を振れる方を、探しているWeb制作の参考にしたいって方もいるかなと思います。 こんな感じでターゲットはできる限り具体的に設定していってください。ふわっとしたものよりもできる限りピンポイントで刺さるものの方がしっかりとしたサイト制作ができます。 そして検索キーワードです。ここはSEOといって検索エンジンを最適化するという観点から、検索でヒットさせたいキーワードを決めておくと良いです。 例えばサービス名や自身の名前、地域名などターゲットが検索しそうな言葉を考えてみます。今回の場合はフリーランスWebデザイナー、ポートフォリオ、Web制作、デザイナー、東京などのようなワードで引っかかるようにしていきたいです。 そして次にコンセプトです。サイト全体を通して伝えたいメッセージやイメージを明確にします。短いフレーズでさせるようにしましょう。 例えばあなたのビジョンをカタチにするWebデザイナー、「成果が出るWeb制作を提供」というような感じです。なので見せ方はかなり変わってくると思います。
[7:50]しっかりとコンセプトとして言語化するということがとても重要になります。次に構成です。各ページやセクションの内容を整理します。サイト全体の骨組みを決める重要なステップです。 ここではどんなページが必要かだけを羅列していけばいいかなとは思います。今回の作成ではトップページと実績のページ、ブログページを作成します。 トップページにたくさん内容が入るのですが、その内容については後ほど詳しく説明をしていきます。記入例の下にチェックリストがあるんですけれども、これはホームページを作成するときによく作るページやセクションになります。
[8:25]自身が必要だなと思うところのセクションにチェックをつけてまとめてみてください。
[8:33]次にデザインのテーマも決めます。サイト全体の色やフォント、雰囲気などデザインの方向性を決めます。ポートフォリオサイトの場合は自分の好きなテイスト、どういう見せ方をしたいのかっていうところで決めてもいいかなと思います。 もしくは企業のホームページであるのであれば、ブランドのカラーだったりブランドのビジョンやミッションに合うような感じが良いかなと思います。それぞれ目的に合ったデザインテーマっていうのが大体あるので、目的に合ったテーマを選んでいってください。
[9:04]今回はポートフォリオサイトというところ親しみやすくて柔らかい印象を与えたいのでテーマカラーはオレンジにしました。フォントに関しては後ほど参考サイトを見ながら決めていくのが良いと思うので一旦ここは空欄でも良いと思います。 そして雰囲気ですね。全体的にどういう印象を与えたいのかっていうところでシンプルでクリーン、親しみやすさを与えるデザインというような風に設定しています。 割とビジネス系であればシンプルで固めで全体的に引き締まった印象だったり信頼を与えるデザインなど、ここも目的に合ったデザインのイメージっていうのをまとめておきましょう。
[9:46]次に参考サイトを選んでいきます。デザインを制作するにあたって何を作るにしても必ず良いデザインを真似するというのがとても大事です。 なので未経験は特に良いデザインを探してそれをいかに応用できるのかが大事です。プロのデザイナーになったとしても参考サイトを探してそこのテイストに合ったようなものを応用するというのがほとんどの場合なので、自分のイメージをそのまま形にするだったり自分のイメージだけを使ってデザインしなければいけないっていうことは全くないです。 良いものをいかに探せるか、いかに応用できるのかっていうところがデザイナーのお仕事になります。具体的にどうやって探していくのかっていうところなんですけど、参考サイト探しに便利なサイトがあり、「SANKOU!」というサイトです。 このサイトはいろんな企業の綺麗なサイトがまとまっているものになります。このサイトの便利なところはカテゴリ検索だったりサイトの種類、サイトの特徴、業種、テイスト、あしらい、色、配色などによって絞り込み検索ができるので、自分のテーマカラーだったりとかサイトの構造だったりとか業種によって検索できるのでかなり便利です。 参考を探すコツがいくつかあるのですが、まず参考にする1つ目が構成ですね。構成内容っていうところで、そこは同業種のものも探すと良いです。 今回はポートフォリオを作成するので、業種のところもしくはサイトの種類っていうところでポートフォリオサイトがあるので、こちらを検索していきます。 こうするといろんなポートフォリオサイトが出てきます。今回ピックアップしたのがこちら1個目なのですが、1個目は私のポートフォリオサイトです。ぜひこちらも皆さんご覧ください。
[11:36]ご自由に活用していただいてOKです。私のポートフォリオサイトにはWebデザイナーとして活動するために必要な情報っていうのが全て詰まっているのでこちらもベースにしていきます。 そしてもう1個がこちらのデザインです。すごくシンプルで綺麗でこの方のイメージっていうのが伝わるようなサイトになっています。この方がすごいなと思ったのはサービスのページがすごく見やすかったです。料金が書いてあったり制作費用の目安がしっかりと書かれていたり制作期間の目安も書かれていたり実績もまとまっているっていうのですごく分かりやすいなと思いました。 このような方の構成や内容の見せ方を参考にしていきます。次に2つ目のポイントは色味やフォント、デザインのテイストが参考になるサイトを探してください。 デザインのテイストを探す場合は色味で探すのが一番良いかなと思います。今回はオレンジをベースにメインカラーとして進めていくのでオレンジで絞り込みをしていきます。 このような感じでオレンジのテーマカラーのサイトがたくさん出てきます。今回参考にするメインのサイトはこちらになります。「マネーフォワード」さんの新卒採用向けのサイトなのですがこの優しい感じのオレンジだったりこの筆記体が可愛いなと思ったりレイアウトも参考になりそうです。 こういうイラストも良いですね。大体私が参考にしようと思っているのは色味のところです。あとはフォントも良いなと思うのでこの辺を参考にしていきます。 そしてもう1つが「Medeco」さんのサイトで、こちらはもっとシンプルでかつ見やすいので色味の感じをこちらにするかもしれません。まだ迷っているので、何個か探していってデザインをするときに絞り込むのがいいかなと思います。 そしてサブでデザインテイストが参考になるサイトっていうのが次に参考にするものなんですけど、メインの参考にするデザインっていうのは1個決めるのですが、それを丸パクリでは著作権に引っかかってしまうので、「ここのパーツに関してはここのサイトを参考にしよう」だったりとか「フォントはこっちにしてみよう」っていう感じで、もう1個サブとなる参考サイトを決めていきます。 これも色味で絞り込むのがいいかなと思います。今回はこの2つを参考にしていきます。アニメーションが多かったりとか「これは実装できなさそうだな」と思うところもあるのですが、そこに関しては今回は実装せず他のパーツを参考にするというのがいいかなと思います。 こんな感じで参考サイトをこのようにリスト化しておきましょう。次に構成内容のテキストをしっかり決めていきます。 ここの「構成シート」っていうところをですね、ここの「タイトル」にページタイトルを入力していただいて「開く」を押すと、このように中のページに入れるようになります。
[15:17]既に内容は記入しているのですが順番に見ていきます。まず「ファーストビュー」です。ここはファーストビューといってサイトに訪問した方が一番最初に入る部分です。
[16:11]ここで一番大事な部分です。ここにキャッチコピーを入れてヘッダーの中にはロゴとメニューを載せています。今回は1ページなのでけれども、1ページのそれぞれのセクションに飛ぶようにセクションの項目のタイトルをメニューとして載せている感じです。
[17:15]一番目立たせたい「お問い合わせ」は一番右側にボタン形式で設置するのと、右下にもCTAといってボタンを設定しています。次に「About」のセクションです。 ここはシンプルなデザインにしました。プロフィールがあって写真があってSNSに飛べるようなボタンも設置しています。次に制作実績です。 ここは作品の画像が分かりやすいように編集したものを載せていて、会社名とタイトルとカテゴリーを載せています。ホームページの中にはLPとかSNSのものも一発で分かるようにしています。そしてサービス内容です。 これはWeb制作、UI/UXデザイン、グラフィックデザイン、ロゴデザインの4つのサービスを載せています。そしてブログのセクションです。 ここはスライダー形式で表示されるようにしています。カテゴリー、タイトル、日付が載るようにしていて今回は更新を考えないで実装していこうかなと思います。 ですので実装の時点ではブログ一覧を見るとこのスクロールのボタンも無くなるかなと思います。次に「お問い合わせ」のセクションです。 ここも一番目立たせたいので背景をオレンジ色に設定しました。そしてフォームの中身はできるだけ分かりやすく入力できるように整列させてシンプルに設計をしています。そして最後は「フッター」です。 ここはヘッダーに載せたメニューをそのまま持ってきて、ロゴとキャッチコピーを載せているという感じです。一番下には著作権を忘れないように設置しましょう。完成したらFigmaの右上のにプレビューボタンを押すと、このように実際のWebサイトのようなプレビュー画面を見ることができます。 ここで文字のサイズが大きすぎないか小さすぎないかを確認したりとか、画像のサイズは適切か、色味の強弱はちゃんとあるかというのを全体的に確認をしたら完成です。 はい、以上でデザインの工程は完了しました。次から実装に入っていくのですが、またここから長くなってしまうと思うので今回の動画はここで終わりにしたいと思います。 次回実装について詳しく解説します！ぜひ次もチェックしてください！
