月額540円で起業の教育と支援を受けられます。

OPENSEED AVERY 新規登録

起業したいけど知識が足りない。何から始めていいかわからない。
そんなあなたに、月額540円で、起業に必要な全てを提供します。

 詳しくはこちら

SHOTA UEYAMA.com

Menu

ウェブサイトってどう作るの? 具体的な作り方の流れとは?2016.11.26

  • このエントリーをはてなブックマークに追加

ウェブサイトが大事だとは気づきながらも、実際に、どうやってウェブサイトが作られているか、知らない人も多いのではないでしょうか。

というより、ほとんどの人が知らないのではないかと。

インターネット上にも、HTMLやCSSなど、技術的な解説をした記事は多いものの、全体像や流れを解説した内容は、そんなに多くなかったりします、実は。

「流れだけわかればいいんだけど」という人もたくさんいらっしゃるはずですからね。

何をするにも、基本を知っておくことは大切です。

今回は、ウェブサイトの作り方について、一通り説明させていただきますので、これからウェブに関係するお仕事をされる方、ウェブに興味がある方、ぜひ、参考にしてみてください。

なお、今回記載する方法は、あくまでもセオリーとしつつも、細部は私たちのやり方です

人によって、会社によって、やや、ずれがあることは、認識しておいてください。

まず、ヒアリングをする。および計画を練る。

クライアントを相手にするのか、それとも自社サービスかによっても、少し異なりますが、基本的に同じ流れを辿ります。

基本的に、最初は意見をまとめ、計画を練ります。なんでもそうですね。

目的は何になるのか、デザインはどうなるのか、色合いはどうするか、どんなコンテンツを作るかなど、決めることはたくさんありますが、できるだけ細かく最初から決めていきます。

参考サイトを見ながら、もしくは提示しながら、徐々に意見をまとめ、最終的に2サイトから3サイトほど、参考となるサイトが見つかれば、話が早いです。

機能面でも、更新できるようにするのか、メールフォームはどうするのか、ソーシャルネットワークとの連携はどうするかなど、可能な限り議題に出していきましょう。

後々、変更があるかもしれませんが、話として出しておくことによって、あとで見落としがなくなります。

途中で少し変更があったとしても、あとからこんな機能をつけたしたい、といった意見が出てくる方が、開発上、大きな手間になります。

徹底的に、必要だと思われる内容を出していきましょう。

企画書にまとめて、スケジュールを出す。

ヒアリングおよび企画のブレインストーミングが完了したら、今度は話をした内容を資料に落とし込みます。

何ページ作るかのサイトマップ。そして、スケジュール。ウェブサイトのレイアウトだけを書いた、ワイヤーフレームもトップページだけざっくり作りましょう。

scsshot

もちろん、色合いや方向性、デザイン、参考サイトなど、ブレインストーミングで話をしたことも、書いておきます。

クライアントワークであれば「言った」「言ってない」のトラブルを無くすためにも、資料にまとめて足跡を残していくことが重要です。

また、自社の企画であっても、自分の企画であっても、情報を整理してあらかじめ考え抜くことで、より深い気づきがあります。

見積もりを出すのも、このタイミングになります。

話をして資料にまとめた段階で、はじめて、どんなサイトを作るべきなのかの全体像が見えてくるはずです。

全体像が見えてきて、どんなサイトを作りたいのかがはっきりしなければ、見積もりは出せません。

ざっくり上下30パーセント程度の誤差があることを前提にして、いくら、と話すくらいが限界でしょう。

逆に、もし最初からこのくらいの値段で出来ますと言い切るのであれば、あとでトラブルを予期していないか、それとも高額かのどちらかのはずです。

ウェブサイト制作をする側もお願いする側も、性急に値段を決めることはやめたほうがいいです。

まとめた資料の内容が全てOKであれば、制作を開始。まずはワイヤーフレームを全ページ作ります。

企画をまとめている段階で、トップページだけざっくり作ったワイヤーフレーム。

ワイヤーフレームとは、先ほども少しお話しましたが、ウェブサイトのレイアウトやコンテンツだけをまとめた、設計図みたいなものです。

基本的には、グレーのボックスや線、そして文字などでまとめられた単純な形で、デザインはまだ入っていません。

ワイヤーフレームは、作るページ数分、全ページ作ります。

ただし、スマートフォンバージョンは、PC用のサイトを、後に行うプログラミングの段階でコーダーと呼ばれる人たちが、臨機応変に対応することも多いです。

なぜなら、スマートフォンのバージョンまで作っていたら、時間も手間もかかるので、予算が必要になるから。

でも、これからはそうも言っていられない時代が来ますね。

なぜなら、Googleがスマートフォン化された方のデータを中心に読むことになりそうだからです。

2016年の2月ころから、スマートフォン中心の理解になるらしいので、もしパソコン版だけがっつり作って、スマートフォサイトはパソコンサイトの簡易版、みたいにしているサイトは、瞬く間に検索順位を落とされる可能性があります。

なので、スマートフォンサイトを中心として、今後はパソコンのサイトを作っていく、ということが正しい解答になりそうなわけです。

ただ、その分、制作する側も負担が大きくなるので、もちろん予算があがります。

今は、パソコン版のワイヤーフレームだけ作る、というケースが多くなりますが、今後はむしろ、スマホサイトをしっかり作りこんで、パソコン版はスマホサイトの延長、という形になるのかなと予想はつきますね。

ワイヤーフレームに大きな変更がないようであれば、デザインに入ります。

一旦、ワイヤーフレームをクライアントや自社、仲間、自分自身で確認して、もし特に問題がなければ、デザインです。

デザインは基本的にPhotohopというツールを使って作ります。

Illustratorというツールで作る人もいますが、基本的に紙媒体あがりのグラフィックデザイナーさんであることが多いです。

基本的にコーダーやエンジニアの人が、Illustratorからの上手い作業方法を知らなかったりするので、とりあえずillustratorで作られた時点で大抵イラッとされることが多いです。

ちなみに、プログラミングを一切知らないデザイナーさんが作ったデザインは、プログラミングの段階で大幅に手間がかかるので、工数が増え、プログラミングも高額になります。

もしデザインをお願いするのであれば、プログラミングの方法をある程度知っているデザイナーさんにお願いしましょう。

とは言え、最近のデザイナーさんは、大体自分でコーディング出来る人が増えてきましたけどね。

デザイナーさんはワイヤーフレームと要望に沿って、デザインを制作します。

scsshot2

色をつけたり、隙間を調整したり、文字を格好良くいれたりします。

それで、ようやくウェブサイトっぽくなってきます。

最初はトップページだけ作り、デザインの方向性を確認することが多いです。

もし全ページ作って、デザインの方向性が間違っていたら、全ページ作り直すという絶大な二度手間になってしまいますからね。

まずはトップページを作りこんで、きっちりデザインの方向性がずれないようにしましょう。

トップページのデザインにOKが出たら、他のページを作り始めます。

基本的に他のページに関しては、トップページデザインのテイストに沿って、一気につくっていきます。

全ページデザインし終えた段階で1度確認にまわし、OKが出たら、いよいよプログラミングの作業です。

HTMLとCSSという言語で、専用のテキストエディタを使ってプログラミング(コーディング)する。

Photoshopで作られるのは、画像です。画像のままウェブサイトとして公開することもできますが、そのままだとクリックで画面遷移をすることはおろか、Googleに認識されることさえありません。

画像をHTMLとCSSという言語でプログラミング(コーディング)することによって、初めて、Googleの検索エンジンにも認識され、検索結果として表示されるようになるのです。

scsshot3

なお、Yahoo!の検索結果も、Googleのシステムを使っているので、基本的には一緒です。

以前はYahoo!は自前のシステムを使っていましたが、途中でGoogleの検索システムだけを使うようになりました。

きちんとGoogleに認識され、さらにちゃんとウェブサイトとして機能させるために、HTMLとCSSで画像データにコーディングという作業を施す必要があるのです。

HTMLとCSSを使ったコーディング方法等は、すでにたくさん記事が存在していますので、検索で調べてみてください。

また、今はドットインストールといったサービスで、オンラインから動画で技術を学べるようになっています。

もし興味がある方は、基本無料ですし、ドットインストールでコーディング方法を勉強してみると、役にたつと思います。

なお、コーディングを行う際に、一緒にレスポンシブ化といって、スマートフォンでも閲覧できるようにします。

ワイヤーフレーム制作の際にお話ししたように、ワイヤーフレームおよびデザインの段階でスマートフォン版の原型ができていないようであれば、このコーディング段階ではじめて、確認できるようになります。

もし、フェードインやフェードアウト、その他の動き、スライドや画像を拡大させるボックスなども、コーディングの段階で実装していきます。

動きをつける言語は、HTMLやCSSではなく、Javascriptという言語で行います。

コーダーの中にはJavascriptを扱えない人もいますので、その点は一緒のものだと思わない方がいいかもしれません。

hpjsku2uysu-carlos-muza

WORDPRESS化および、会員登録など、複雑なシステムの実装は最後。

HTMLとCSSでコーディング完了した段階は、基本的に静的と呼ばれ、ブログの投稿も、会員登録も特にできません。

ユーザーが何かアクションを起こしても、アプリのように使える状態ではなく、単純に「広告」の役割を果たすものです。

そこから、ブログを更新できるようにしたり、会員登録させたり、ショッピングサイトとして何か買えるようにしたりできるのは、また別のphpという言語や、Rubyといった言語でプログラミングしてからです。

WordPressは簡単にウェブサイトが作れると一般的に思われています。

実際、Wordpressは、最後の段階で初めて導入です。

WordPressにはテンプレートの機能がるので、テンプレートをそのまま使うのであれば簡単にウェブサイトも立ち上げられるでしょうが、もしオリジナルのデザインでWordpressを使いたいと思えば、普通のウェブサイトを制作する手順はふまなければなりません。

scsshot4

オリジナルかテンプレートを使うかで、大きく工数が違うわけです。

オリジナルのデザインでWordpressを使うということは、HTMLとCSS、そしてjavascriptを使って静的なウェブサイトを作ったあとで、Wordpressのシステムを合体させる、という手順になります。

会員登録やショッピングサイトなどを作るときも、ここからさらにプログラミングしていく必要があるわけです。

以上の手順で、一通りシステムまで作り終わって、はじめてウェブサイトが完成します。

もっとも、静的でいいのであれば、システム実装の段階は踏まなくてもよい工数になります。

まとめ

いかがでしたでしょうか。ウェブサイトを制作する手順について、初めて知った方もいらっしゃるかと思います。

実際、クライアントと仕事をするにしても、自社および自分で制作するにしても、全ての流れが頭に入っていると、これほどやりやすいことはありません。

事前に認識の違いや食い違い、無茶なスケジュールが立てられることもなく、スムーズにデザイナーやエンジニアと話ができるようになるはずです。

今、ウェブサイト制作は、かなり一般的なものになりました。

どんな企業も活動も、もはやウェブサイト無しには「負けてしまう」ほど存在感を発揮している武器となっています。

ただ、それでも、ウェブ制作の工程や、方法、手段などがあまり知られないままに、ただただ勘違いが蔓延してしまっているのかなぁ、なんて感じることもあります。

しっかりと手順や方法、そして技術や工数の理解が進むことで、もっとスムーズにプロジェクトを運べるようになっていくのではないでしょうか。

ぜひ、ウェブについて勉強し、できることやできないことを把握してみてください。

新しい可能性や解決策も、いろいろと見えてくるはずです。

月額540円で、起業を学び、支援を受けられるオンライン・プラットフォーム「AVERYβ版」公開しました!

将来、起業・複業するので知識を得て準備をしたい。起業・複業したいけど、何から始めていいかわからない。お任せください。AVERYでは「起業・複業」の全てが学べます。
AVERYは、あなたにとって最適な起業・複業プランを自動提案。様々な知識を提供するたけでなく、人や機会ともつなぎ合わせます。起業・複業を志す人が使うべきプラットフォームの最適解です。
起業・複業の「学び」と「支援」に、高い費用を払うのは、もう終わりです。一緒に、ワクワクする事業を作り上げていきましょう!
» 詳しくはこちらから!

上山 翔太 / SHOTA UEYAMA

起業家×ウェブクリエイター。日本国内だけでなく世界中で活動。
2015年、セブ島にて立ち上げた日本人対象のクリエイター育成スクールを売却。
帰国後は起業家育成プログラムを立ち上げ、起業家育成に従事するほか、中小企業様のマーケティング戦略策定、ウェブ開発技術を個人で提供。
現在はアメリカの投資家と組み、日本において、ベンチャー起業の投資および、取締役としてメンバーに参加する形での、企業支援・起業家育成活動に取り組む。

Facebookお気軽にフォロー&友達申請してください^^
つぶやきは大体ITや起業・マーケティング関係ですが。笑
https://www.facebook.com/shotaueyama01

  • このエントリーをはてなブックマークに追加

今、登録すべき! Amazonプライム!

アメリカの経営者から聞いた、最低賃金の怖い話。

そこで、翌日、サンタモニカで他の経営者に話を聞いてみました。 どうやら、ここ数年で物価が上がったのは間違い無いとのことで。 なぜ、そこまで物価が上がったのか尋ねると「最低賃金」の影響だと言うんですね。 オバマ政権の時に最