Webサイトを作るために最低限必要な知識

Webサイトを制作するためには、Webサイトの制作会社へ頼む。
Webサイト作成サービスを利用して制作する。
または自社または個人で作るという3つの方法があります。
今回は自社または個人で作るために最低限必要な知識、覚えておくとより良いサイトが制作できるテクニックをご紹介します。

最低限の知識

ドメイン、サーバー、HTML、CSS、画像加工、システム(PHP、JS等)などが基本的な項目になると思います。
CMS※などはWebサービスに当たるので、今回の記事では書きません。
CMSについてはWebサイトを作る時に使えるWebサービスのまとめ6選!でご紹介していますので、こちらをご参考下さい。

※CMS… Contents Management System(コンテンツマネジメントシステム)の略。
ページの追加や文字色の変更などの装飾が文書作成ソフトのように操作できるシステムのこと。
当ブログもWP(ワードプレス)というシステムで運用しています。

ドメイン

インターネットの住所を表しています。
当サイトのadoc.bizの部分がドメインになります。
ドメイン取得代行会社が管理しており、ムームードメインやお名前ドットコムなどのドメイン会社に支払います。
.jpドメインはちょっと高いですが、年間で980円~5000円くらいに収まります。
価値の高いプレミアムドメインと呼ばれるものがありますが、これは車の希望ナンバーみたいなものです。

サーバー

Webサイトの様々なファイルを置く場所です。
Xserver、ロリポップ、さくらサーバー、Hetmlなどが多いのではないでしょうか。こちはプランによりますが、月額500~3000円くらい。
勿論高性能なサーバーであれば、月額30000円~とかもあります。
その他、Amazonが行っている従量課金制のサーバーもあります。
アクセスの見込み数などによって借りるサーバーを変えます。

HTML

Hyper Text Markup Language(ハイパー・テキスト・マークアップ・ランゲージ)の略。
ウェブページを作成するために開発されたPC言語で、クライアント(ユーザー)のリクエスト(URLでアクセスすること)をサーバー側のPCがHTMLを読み取ってWebサイトを表示させます。

CSS

Cascading Style Sheets(カスケーディング・スタイル・シート)の略。
HTMLで作られた情報の見た目や表示方法を操作するために使用します。

画像加工

サイトの印象を大きく左右するメインイメージや、テキストの補足としてのイメージ画像など、Webサイトにおける画像の持つ役割は大きいものがあります。
そのままでは暗くて使えない画像を明るくする。
背景を消して切り抜いたりする必要がでてきます。
そういった作業をする場合は、GIMPのような無料ソフトやPhotoshop Express Editorのような無料のWebサービスを利用するか、Adobe社が提供しているPhotoshopやIllustlatorなどの画像加工ソフトを利用して行います。
それぞれ使い方について覚える必要があるので、ある程度練習が必要になります。

システム(PHP、JS等)

Webサイトにおいては問い合わせフォームの作成や、ボタンを押した時の切り替わり方に特別な効果をつけたい場合、覚える必要があります。

より良いサイトが制作できるテクニック

調査を元に情報設計と画面設計を行います。
情報設計と画面設計は別項目で書いていますが、ほぼセットです。

調査

Webサイトで提供する商品やサービスを競合よりも魅力的に見せるために、調査します。
自社及び他社の客観的な情報を集め、どのようにすれば効果的にPRできるかという戦略を立てます。

作業内容

競合調査はどのようにすればいい?調査に役立つサイト7選でご紹介したサイトなどを使用して情報を集め、自社の人的資源と相談しながら実現可能でなおかつ最も費用対効果が高いであろう順番で優先順位をつけていきます。

情報設計

分かりやすいカテゴリ名やコンテンツ名をつけて似た情報をまとめ、訪問してくれたユーザーがサイト内で迷子になることなく目的の情報に簡単にたどり着くようにします。
更新や追加を繰り返していく内に、構造が複雑になって迷子になるユーザーが増えてきたサイトをリニューアルする場合や情報量が多いサイトを新たに作る場合は必要になることが多いです。
ユーザー視点で実施するのが重要な要素です。

作業例

調査で集めた情報をカテゴリ毎に整理
情報の取捨選択
各リンクを設置

画面設計

情報設計でまとめた情報をUI※にします。
ユーザーがサイトを使いやすいような構造にするために分かりやすい入り口(ナビゲーションやバナー・ボタン)を整備して、通路(関連リンク)を確保します。
情報設計と画面設計の2つがディレクターにとっては最も力の入る仕事内容です。

※UI…ユーザーインターフェース、見た目のこと

作業内容

ワイヤーフレームの作成(サイトの情報や機能などを書き込んだ設計図です)

まとめ

いかがだったでしょうか。より良いサイトが制作できるテクニックはWebディレクターの仕事内容と求められるスキルでもご紹介していますので、詳細にご興味のある方はこちらもご参考下さい。

The following two tabs change content below.
大阪在住のWebディレクターです。 食べ歩きとスーパー銭湯巡りが趣味です。 コメントや問い合わせをもらえると喜びます。
スポンサーリンク
adsense




adsense




シェアする

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

フォローする

スポンサーリンク
adsense