Webデザイン

ゼロからはじめる、Webサイト作成から公開までの流れ。

初めてWebサイトを作成する方のための、5つの簡単なステップ

Maaya Rida

ゼロからウェブサイトを制作することに決めたとき、どこから始めれないいのか分からない人が多いと思います。

「何から始めればいいのかな?」

「どんなサイトがいいのかな?」

と永遠に終わらない自問自答に陥り、中々抜け出せなくなくなっていくことも。

この記事では、そんな方をガイドするための、ゼロからWebサイトを作成するステップを紹介します。

ゼロからWebサイトを作成する:5つの簡単なステップ

  1. ウェブサイトの目的と適切な制作方法の選択
  2. インスピレーションを得る
  3. サイトのレイアウトとコンテンツを計画する
  4. 美しいかつ、ユーザーフレンドリーなウェブサイトデザインを作成する
  5. ドメイン名を取得してウェブサイトを立ち上げる

1. ウェブサイトの目的と適切な制作方法の選択

まず初めのステップとして、このステップが一番重要で深く考えるべき点になります。これを考えずに制作プロセスに入ることはオススメしません。

ウェブサイトの目的は何か

ウェブサイトの目的次第で、どの方法があなたのウェブサイトを制作するのに最適かを判断することができます。 高度なコーディングスキルがなく、プロのWebデザイナーと開発者を雇う予算がない場合は、以下のWebサイトビルダーが簡単で安価な方法になります。

一般的なウェブサイトに最適 : STUDIO

http://studio.design/ja

空のキャンバスからスタートし、無料のストックフォト、ワイヤフレーム、デザインテンプレートコンポーネントのギャラリーを使用してサイト制作ができます。魅力的で高度にカスタマイズされたWebサイトを制作したい場合は、STUDIOがオススメです。

STUDIOを使えば、コーディングなしでWebサイトの制作が可能


ネット通販に最適 : Shopify

https://www.shopify.com/ https://www.shopify.com

ネット通販専用のウェブサイトビルダーを選択する利点は、ビジネスの成長を支援するための幅広いツール、アプリ、サポートを見つけることができることです。


ブログに最適: Wordpress

https://wordpress.org/

コンテンツを中心としたサイトを制作するには、CMS(コンテンツ管理システム)が必要です。ただし 欠点としては、ウェブサイトのデザインをカスタマイズするためにある程度の技術的スキルが必要なことです。


プロフェッショナルな人材を雇うか、または育成する

Web開発スキルを磨き、特に複雑なプロジェクトに特有のニーズがある場合は、Webサイトを最初からコーディングするか、プロのデザイナーを雇うことを検討するかと思います。

STUDIOなどのサービスを選ぶ一つの理由としては、ただのデザインプラットフォームへのアクセスだけでなく、ホスティングもパッケージの一部になっているということです。なのでホスティングの心配をする必要がありません。 もちろんあなたが独立することを決めた場合、自身のドメインを取る必要があります。

あなたのウェブサイトのゴールは何ですか?

あなたのウェブサイトを通じて達成しようとしていることを考えることは、デザインとレイアウトの決定に影響するため、非常に重要です。

例:
オンラインサービスへのサインアップ → サイト上部のヘッダーにサービスのアピールポイントが分かりやすく表示されていること、そしてサインアップボタンがページの焦点であることが重要です。

企業のページからのコンタクトを増やす →あなたのサービスと信頼性を強調し、連絡先のフォームとボタンをウェブサイト全体に戦略的に配置する必要があります。

誰が、なぜ、あなたのウェブサイトを訪問するのか?

常に自身をターゲットオーディエンスとして考え、ウェブサイトのコンテンツ、スタイル、雰囲気について考える必要があります。 人々は、自分が欲しい情報を見つけられなくなった時、すぐにページを離れてしまう傾向があることを忘れないでください。 さらに、サイトでの表現スタイルがターゲットとしている人のタイプに適しているかどうかも大事です。


2. インスピレーションを得る

さて、制作しようとしているウェブサイトの種類がある程度決まったかと思います。 次はあなたが制作にかかる前に良いインスピレーションを得る時です。

覚えておいて欲しいのは、インスピレーションというのは、ただ単純にコピーするウェブサイトを見つけることではなく、自分のユニークなプロジェクトに適用できる興味深いアイデアを得ることです。

私たちのオススメするインスピレーション元は次のとおりです:

LandingFolio https://www.landingfolio.com/

Awwards https://www.awwwards.com/

Behance https://www.behance.net/

参考にしたいウェブサイトは見つかりましたでしょうか。今度は、その見つけたサイトのスタイリングと構造決定の背後にある詳細と論理に注目してみてください。

例:
ウェブサイトのレイアウト;
・ページ上でのセクションがどのように整理されていますか?
・メニューとナビゲーションはどのように見えますか?

デザイン
・どのカラーパレットが使用されていますか?
・どのようなフォントですか? どのような画像ですか?

行動喚起とウェブサイトのフォーカルポイント;
・ページ全体でどのように色と位置を重視していますか?

ボーナス例:

こちらの例は、シンプルに構成されたサービスのランディングページです。 サイトの主な目的は、訪問者にアカウントを作成させることです。 よくあるサービスランディングページのように、ヒーローバナーのイラストでコアセールスポイントを分かりやすく見せています。

Bonsai Landing Page Design


3. サイトのレイアウトとコンテンツを計画する

さあ、ここからがウェブサイト作りの楽しいところです! 紙とペンを持ち、ウェブサイトの構造と項目をスケッチしてみましょう。 複数のページを作成する予定の場合は、どのようにリンクしているかもスケッチしてみてください。 紙にすることで、それをウェブサイトに反映するだけになるので、作業がはるかにスムーズになり、制作時間が短縮できます。

(Photo credit: picjumbo.com from Pexels)

ウェブサイトのコンテンツに関しては、一般的に以下の項目またはページがあります。

  • 当社について
  • 当社のサービス
  • ポートフォリオ/ショーケース/ギャラリー
  • 実績
  • よくある質問
  • お問い合わせ


4. 美しいかつユーザーフレンドリーなウェブサイトデザインを作成する

サイトの現実的な構造ができたので、視覚的にも魅力的なものにしてみましょう。ターゲットオーディエンスとそのニーズが第一の優先事項であることを常に意識してください。

STUDIOを使用した場合、デザインを計画したりモックアップを作成するのではなく、実際にエディタからさまざまな組み合わせやデザインの選択肢を確認し、後で同じプラットフォーム内にサイトを公開することができます。 開始するには、「STUDIOでデザインを開始する方法」ガイドに従ってください。

https://studio.design/how-it-works

STUDIOを使用していなくても、以下のようにワイヤフレーム、またはシンプルテンプレートでレイアウトすることから始めることをオススメします。

STUDIOでのワイヤーフレームレイアウト

次のステップは、デザインの基本要素について考えることです。

カラーパレット:

ページ全体で使用するカラーは主に2色または3色がベストとされています。 ロゴがある場合は、ロゴと一貫していることが理想的です。 カラーパレットがウェブサイトの印象の90%以上を占めるので、慎重に選ぶ必要があります。

インスピレーションが必要な場合は、以下ののツールを使用して適切なカラーパレットのアイデアを抽出すことができます。

Color Hunt

https://colorhunt.co/

HUE 360

https://hue360.herokuapp.com/

タイポグラフィ:

テキストのスタイル、色、サイズに関係するものです。 デザインと他の要素と同様に、ただ単に綺麗に見せるだけでは駄目です。ユーザーに見やすくすることが大事になります。 ここで最も重要な点は次のとおりです。

  • 1つまたは最大2つのフォントのみを使用し、サイト全体での一貫性を保つ
  • テキストと背景色のコントラストが充分にあることを確認する
  • フォントはすべてのサイズで読みやすいこと

筆記体フォントは読みにくいので、注意して使用してください 。(source)筆記体フォントは読みにくいので、注意して使用してください 。

読みやすいフォントが重要なのと共に、優れたタイポグラフィはサイトをカッコよくすることができます。

タイポグラフィだけでウェブサイトをカッコよく見せた良い例。Monodigital タイポグラフィだけでウェブサイトをカッコよく見せた良い例。Monodigital

Cowboy.bike Cowboy.bike

画像 :

ウェブサイトの画像を選択するための最も基本的な原則は、どのスクリーンサイズでも見栄えのよい高品質で高解像度のものを選択することです。

Choosing low resolution images will result in a pixellated effect on big screens. Source

カラーパレットは背景とフォントだけではなく、画像にも適用します。 ウェブサイトに使用す写真のコレクションを既にお持ちの場合は、それを元にカラーパレットを選択することが出来るかもしれません。 それ以外の場合は、カラーパレットに合った画像を参照してみてください。

美しい写真だけでもシンプルなウェブサイトを豪華に見せることができます。 あなたが有能な写真家でなくても、今は多くのサービスがプロのストック写真を無料で提供しています。

One of the beautiful templates available on STUDIO.

STUDIOを使用するときは、フリーのフォトギャラリーがに表示され、好きな画像をエディタ上で選択できます。わざわざ別のウィンドウで検索する手間がかかりません。

STUDIOでの無料の画像ストック

別のウェブサイトビルダーを使用している場合、以下のストックフォトギャラリーを是非使ってみてください。

  • Unsplash
  • Pexels
  • Shutterstock
  • Pixabay

5. ドメイン名を取得してウェブサイトを立ち上げる

友人や同僚から第三者目線の意見をもらい、ウェブサイトのコピーに間違いがないことを確認し、すべてのリンクが機能しているかどうかを確認した後、遂にあなたのウェブサイトを立ち上げる準備が整いました。 サイトを公開するためには、サブドメイン(「yoursite.studio.design」など)を利用する場合を除き、独自ドメインを購入して接続する必要があります。ドメインが利用可能な場合、最も簡単な選択肢はは会社名、またはあなたの名前をドメインに設定することですが、必ずしもそうである必要はありません。

ドメイン名を決める際に、そのドメイン名が関連性に高く、短く、記憶に残るようなものであることが大事です。 ドメイン名が利用可能かどうかをチェックして購入するには、GoDaddyのようなドメイン名サービスを参照してください。

https://www.godaddy.com/

これで、ゼロからウェブサイトを制作するガイドは終わりです。 この5つの簡単なステップさえ頭にいれとけば、基本的なウェブサイトを制作することが可能です。

あとは、他社との差別化を出すためにもあなたのクリエイティブ面を出し、色々工夫して遊んでみましょう! きっと思い描いたウェブサイトが出来ると思います。

STUDIOはデザイン性に優れているため、クリエイティブにサイトを制作した方にオススメです。 コーティングなしで自由自在にウェブサイトを制作出来ます。 またサイト制作で分からないことがある方のために、24時間対応のチャットや、ヘルプ記事も充実しています。 是非一度使ってみてください。