【Webサイト制作】初学者必見！webサイトのデザインから始めて公開するまでの5つのステップ

1.妄想

webサイトを作るとなったとき、まず頭の中で「サイトの全体のイメージはどのようにしようか」「カラーは何を使おうか」「どんな機能を導入しようか」「どのようなコンテンツを入れようか」など妄想をし、作りたいwebサイトのイメージを膨らませていきます。

妄想を行うことでリサーチが行いやすくなる他、「webサイトを作るぞ！」とモチベーションを上げることができるため、私は必ず妄想を行っています。あまり時間をかけるのではなく、移動などの隙間時間に行うことが多いです。

2.リサーチ

リサーチは「Pinterest」「Google検索」「Youtube」「note」「X」など、あらゆるものを使って妄想で膨らませたイメージをさらに膨らませたり、イメージをより具体的にしたり、実装に必要なスキルを調べてそれを身につけるために行っています。

例えば、妄想でwebサイトにブログを導入したいと考えた場合、「Pinterest」でブログのデザインを調べたり、Googleで「webサイト ブログ 実装例」と検索したり、まとめサイトを見漁って既存のwebサイトで実装されているブログ参考にします。以下の３つのサイトは私が普段から愛用しているまとめサイトです。

また、リサーチでは「ブログの実装の形」だけを参考にするのではなく、「実装方法」も調べます。私自身、このポートフォリオサイトでブログを導入したいと妄想段階で考え、既存のwebサイトでブログがどのようにデザインされているかを調べた他、webサイトへのブログの導入方法がわからなかったため、「Google検索」「Youtube」「note」「X」などあらゆる手を使ってブログの導入方法を調べました。そして、Astroというフレームワークを使えば簡単にヘッドレスCMSに繋ぐことができ、ブログの導入ができると知り、すぐにUdemyでたにぐちまことさんの「ちゃんと学ぶ、Astro」という講座を購入し勉強した他、Astroについて解説しているYoutubeやネット記事などを見漁った結果、このようにブログを導入することができました。

3.デザイン作成

リサーチでインプットが終わったらFigmaで実際に形にしていきます。頭の中でイメージしているものがあっても、それを納得の行く形にすることはとても難しいことなので、最初から完成を目指すのではなく、とりあえず手を動かし続けることが大切です。私自身もデザインに取り掛かり始めた最初はなかなかうまく形にすることができないが、「考える、作る、壊す」を何度も繰り返していくうちに段々と納得の行く形が出来上がっていきます。

どこまでデザインを作り込むべきなのか

まず、webサイトのデザインはなるべく完成させておいた方がいいです。これは、実際にコードを書くときにどうやってコードを書くか設計を立てやすくなるからです。しかし、全て完璧にローカルスタイルやローカルバリアブル、オートレイアウトに対応させたりコンポーネントを無理に作る必要はありません。webサイトを閲覧するユーザーのことを第一に考え、ユーザーにどのような印象を与えたいか、どうしたらユーザーにストレスを与えずに的確に情報を伝えられるかなど、ユーザービリティやアクセシビリティなど見る・使う人のことを考え、それを形として表現してコーディングにつなげることがデザイン制作の目的なので、細かいFigmaの設定だったり1px単位での制作に無理に時間を使って完璧なデザインデータを作ることを目的にしてはいけません。

ローカルスタイルとローカルバリアブル

サイトで使うcolorやfont-size、font-family、padding、marginなどデザインのルールを決めていきます。「ローカルスタイル」や「ローカルバリアブル」の機能を使ってこれらを設定していくことでデザインの効率が格段に上がる他、デザインにばらつきが出ことを防ぐことができたり複数単位でのカラーやフォントサイズなどの変更が楽に行えます。初めはローカルスタイルだけで十分なのでローカルスタイルを使用していきましょう。

ローカルスタイルでは「テキスト」「カラー」「エフェクト」「グリッド」を設定することができます。

例えば資料のタイトルを全て同じスタイルにしたい場合、一つ一つのタイトルに毎回スタイルを指定するととても効率が悪く、後で変更したい場合には一つ一つ変更していかなければいけないので手間がかかってしまいます。下の画像のようにタイトルに使うテキストスタイルを作成し、それをタイトルのテキストで使用することで、後でタイトルのフォントサイズを40pxから96pxに変更する場合に、タイトルのテキストスタイルを40pxから96pxに変更することで一括で変更することができます。

オートレイアウト

オートレイアウトはとても便利で、デザインの効率だけでなくデザインの正確性が向上するので使用できるところは積極的に使用した方がいいですが、無理に全てオートレイアウトに対応しようとしなくて大丈夫です。コーダーの方にデザインデーターを渡す際には、なるべくオートレイアウトに対応させた方が好まれます。

コンポーネント

コンポーネントについては、デザインから実装まで自分1人で行う場合には作成しなくていいと考えています。コンポーネントを作成するメリットとして、ボタンやアイコンなどの再利用性を高められる点やボタンの色などの細かいデザインの修正を効率的に行える点、チーム作業でのデザイン意思の統一性を向上させることができるという点がありますが、コンポーネントを作成する手間を考えたら無理にコンポーネントを作成・利用する必要はあまりないと考えています。

アニメーション

私は自分1人でデザインから実装まで行う際、リサーチだったりデザインをしていくうちにイメージした動きをテキストでメモを残すくらいだが、チームでデザイン制作をする際やコーダーにデザインデータを渡す際には、イメージした動きをFigmaで忠実に再現したり、参考にしたサイトのリンクを貼ってどこのどのような動きを実装して欲しいのか示すなど、コーダーの方に実装して欲しい動きをわかりやすく的確に伝えることが重要です。その際に、なぜその動きがいいのかということも伝えられるといいです。

4.Astroでコーディング

Astroとは

Astroとは、

Astroは、Webサイトを制作するためのフロントエンドフレームワークです。ヘッドレスCMSなどと連携しながら、HTML/CSS /JavaScriptなどのフロントエンド技術だけで高度なサイト開発が可能となる強力なフレームワーク機能を提供しています。

たにぐち まこと, 2024/1 , 「ちゃんと学ぶ、Astro」 , Udemy, (2024/1 https://www.google.com/url?q=https://www.udemy.com/course/astro-chanto/%23:~:text%3DAstro%25E3%2581%25AF%25E3%2580%2581Web%25E3%2582%25B5%25E3%2582%25A4%25E3%2583%2588%25E3%2582%2592,%25E3%2582%2592%25E6%258F%2590%25E4%25BE%259B%25E3%2581%2597%25E3%2581%25A6%25E3%2581%2584%25E3%2581%25BE%25E3%2581%2599%25E3%2580%2582&sa=U&ved=2ahUKEwiWuNnZy4GEAxW5gFYBHWphBWUQFnoECA8QBQ&usg=AOvVaw0Y2RC4R4inw1O9ZMW7W58A)

とあるように、比較的簡単にブログ機能を導入できたりwebサイトの処理速度を高めたりなど、高度で高速なwebサイトを構築することができます。ですので、HTML/CSSを学んでいる方はAstroも学んでwebサイトを構築できるようになると、webサイトの成果が格段に上がるのでおすすめです。

Astroの導入方法

ここでは、VScodeを使って導入方法を解説していきます。

Astroのインストール

まず、下記のコードをVScodeのターミナルに入力し、Astroのインストールを開始します。

npm create astro@latest

上記のコードを入力したら、「Where should we create your new project?」と聞かれるので、その下にファイル名を入力できます。

そして、ファイルの構成や設定などいくつか質問されるので、その時の状況に応じて設定していきます。今回は下の画像のように設定しました。

これで指定したファイルへのAstroのインストールが完了です。

この他の詳しい使い方については、他の記事で紹介していく予定ですので、今しばらくお待ちください。

また、Udemyでたにぐちまことさんの「ちゃんと学ぶ、Astro」という講義を見ていただくとより理解することができると思いますので、Astroに興味を持っていただいた方は、ぜひ、見ることをお勧めします！頻繁にセールを行っていますのでその期間に買っちゃいましょう。

ローカル環境でのサイトの確認方法

HTMLで制作するサイトは、VScodeの拡張機能であるLive Serverでサイトの制作状況を確認することができましたが、Astroで制作する際にはそれができず、Astroをインストールした時と同じようにターミナルにコマンドを入力していく必要があります。

下記のコードをターミナルに入力するとサイトのリンクが表示され、それをcmd/alt + enter/クリックでサイトをローカル環境で確認できるようになります。

npm run dev

5.サイトの公開

先程npm run devコマンドでローカル環境でサイトを確認できるようにしましたが、ローカル環境では自分しかサイトを見ることができないため、他の人でも閲覧できるようにするにはまた別に作業が必要です。ここでは、GithubとNetlifyを使ったサイトの公開方法を紹介します。

GitHubに新しいリポジトリを作成する

Your repositoriesからNewと書かれた緑のボタンを押し、

リポジトリの名前を設定して公開状況をPublicに設定し、Create repositoryを押してリポジトリを作成します。

ここまで完了したら下の画像のような画面が出るので、

下記のコマンドをターミナルに入力します。

git remote add origin https://github.com/ACCOUNTNAME/REPOSITORYNAME.git
git branch -M main
git push -u origin main

これでGitHubのリポジトリに制作するサイトのファイルを接続することができました。

NetlifyにGitHubを接続

Netlifyのアカウントを作ったらTeam overview > Add new site > Import an existing projectから「Deploy with GitHub」を押し、Netlifyを認証するGitHubのアカウントを設定します。

そしたら下の画像のような画面になるので、制作しているサイトを接続したリポジトリを選択し、インストールを押したらNetlifyとGitHubの接続が完了です。

サイトの公開

下の画像のようにビルドやデプロイの設定を行い、「Deploy astro-test」をクリックし、

少し待つとhttps://~~~と書かれたリンクが出るのでそこをクリックすると制作しているサイトを確認することができます。

これで、リンクを知っている人なら誰でもサイトを閲覧することができるようになりました！

サイトの更新

VScodeのサイドバーにある、青丸で数字が書かれているところをクリックしてメッセージに何かコメントを入力し、コミットの右のアイコンをクリックして「コミットしてプッシュ」をクリックするとデプロイが始まります。

少し待ちDeploy logが全てCompleteとなるとサイトの更新の完了です！

最後

私自身のポートフォリオサイトの制作の流れを元にしてwebサイト制作の流れの全体像を紹介しましたが、必ずしもこの流れに沿って行う必要はなく、サイト制作の数をこなしていくうちに自分に合った流れが見えてきたり、チームで制作する際にはチームでの流れやルールを大事にしたりクライアントワークの際にはクライアントとのコミュニケーションを大事にして政策を進めるなど、その場の流れに合わせて制作をすることが大切です。

また、初学者の方はわからないことだらけだと思いますが、私自身もわからないことだらけです。しかし、一つづつ地道に手を進めていったら必ず何か見えてくる時が来るので、諦めず地道にがんばりましょう！

想像以上に長くなってしまいましたが、ここまで見ていただきまして本当にありがとうございました。