コーディングって聞いたこと、あります？

Webサイトをつくることもデザイン会社であるアカリヲの仕事内容のひとつですが、会社案内やパンフレットといった印刷物をデザインすることとは異なり、デザインを動かすこと=コーディングが必要となります。
クライアントに説明する際に、このコーディングというものを理解してもらうことがなかなか難しかったりします。今回は改めてコーディングを分かりやすく解説・紹介してみようと思います。

Webサイトができるまで

まず、何事もそうですが、目的を明確化することが大切ですよね。それはWebサイトも一緒。ヒアリング・コンセプト設定か始まります。クライアントがWebサイトの制作を依頼する=必ず理由があります。例えば、「自社商品を売りたい」や「問い合わせ数を増加させたい」、または「商品の認知=ブランディングをしたい」など。このようにクライアントが抱えている問題はさまざまです。まず、クライアントがどんな問題を抱えているか、調査する必要があります。サイトの目的やプロジェクトのゴール・ターゲット・クライアントの業種や強み・業界の調査・競合状況などなど、「知る」ことからスタートします。

その後は、サイトの構成・コンテンツを制作していきます。ここではサイトマップや仕様を設定することが主になります。仕様は制作（実装）する際にとても重要。簡単に言うと、「どんなサイトにするか？ 」を明確にし、制作陣が共通理解を持てるようにすることです。

次は、Webサイトに必要なページはどんなものがあるかを洗い出していきます。例えば、会社のサイト（コーポレートサイトと呼びます）であれば、会社情報・製品情報・実績・問い合わせページなど、どんなページが必要であるかを具体的に抽出していきます。

では、それぞれのページはどんなデザイン・レイアウトにするべきかを設定していきます。とは言え、まずはデザイン作業をする前段階の骨組み（ワイヤーフレーム）から。印刷物ではラフデザインと呼称されますが、Webの場合はワイヤーフレーム。

いよいよ、デザイン。と思いますが、デザインをする前にデザインで使う写真やテキスト原稿が必要です。しかし、これら素材が揃ってからデザイン・レイアウトすることもありますが、ほとんどは素材をダミーにし、仮のデザインを制作していくことがほとんどです。トップページ（Web版の表紙）と下層ページ（サイト内でクリックして進んでいった先）と分けて制作していきます。先ほどのワイヤーフレームを元にデザインを起こしていきます。この装飾・デザイン制作の段階では、素材の用意・レイアウト制作、デザイン・方向性の確認をクライアントにしていきます。

ここまでで制作してきたデザインパーツを組み、本番のテキストや写真を流し込んでいきます。
CMS（コンテンツ・マネジメント・システム ※）やECショップの買い物カゴ、お問い合わせフォームなどのシステムが必要な場合は、コーディングの後に組み込んでいきます。

※CMS（コンテンツ・マネジメント・システム）は、Webの専門的な知識が無くても操作を覚えれば簡単にサイトの新規ページやページが更新できるシステムのこと。

Webサイトのコーディングとシステムの組み込みができれば、サイト制作は完了。その前にページへ入れた原稿の校正やシステムで組み込んだページの動作が正常に遷移できているかの確認をしっかりと行います。問題がなければクライアントと決めた公開日時通りに本番公開となります。

コーディングってなに？

コーディングは、「サイトごとに取り決めた設計書を元に、コンピュータが理解できる言葉を使用し、ソースコードと呼ばれるコンピュータへの指示書を書くこと」。デザインをWebブラウザ上に表示させられるようにすることをコーディングと呼びます。PhotoshopやIllustratorで作成したデザインは、そのままではホームページに利用できません。そのままではデータ容量が大きいためにサイトが固まってしまいます。そのためにコーディングが必要なのです。

コーディングのおかげでサイトがスムーズに動くようになり、ユーザーが使いやすくなります。また、画像に動きをつけられ、ユーザーが楽しみながらサイトを使えるようになり、滞在時間やリピート率が伸ばせます。よく例えられますが、サイトづくりを家づくりに置き換えると、デザイン=設計であり、コーディング=大工。実際に組み立てる作業を行うために、このように例えられます。

もう少し解説すると、HTMLは聞いたことがあると思います。このHTMLは、ハイパーテキストマークアップランゲージ（Hyper Text Markup Language）の略称です。サイトに記述する文章にタグと呼ばれる記号を用いて意味を与える（マークアップする）ための言語です。

続いて、サイトのスタイルを定義しているCSSについて解説します。
CSS（Cascading Style Sheets）とは、 Webサイトのサイズや色、レイアウトなどを設定するためのプログラミング言語。背景の色の変更や画像の設置、文字のフォントや色などの幅広いデザインを定義する際に使用されています。

その他、JavaScriptも聞き馴染みがあるかもしれませんね。JavaScript（じゃばすくりぷと）は、サイトの中に動きをつけるときに活用されています。ユーザーがサイトを表示したときや操作をしたときに、あらかじめ決めておいた動作が発生するようになります。よくあるのが、ポップアップウィンドウの表示や文字や画像などのアニメーション、自動スクロール／スライダーなど。

近年ではデザイナーとコーダーの職域が整備され、分業となっていることがほとんどです。それぞれが協力をしてWebサイトが出来上がっていきます。

デザイナーもコーディングスキルは必要？

先述したように分業されていることがほとんどですので、「Webデザイナーだからコーディングスキルは不要」と考えることもできますが、デザイナーもコーディングの基礎知識は身につけておく方が◎です。
当然、HTML、CSS、JavaScriptが「どのような働きをするのか」「何ができて、何ができないのか」は必須。
これらを理解していないとサイト上で実装できないデザインをつくってしまったり、コーダーとのコミュニケーションが上手く取れなかったりします。とは言え、コーディングの基礎知識は必要ですが、本格的にコードを書けるようになる必要はないと思います。書けるに越したことはありませんが、どちらもマスターにするのはとても大変なことですので。実際、アカリヲでも分業制を用いています。また一部、パートナー契約をしている外部スタッフにお願いしているものもあります。

Webサイトをつくるには、いろいろな職域が存在し、それぞれの領域でプロフェッショナルが関わっています。とは言え、クライアントと対峙・説明する際には理解をしていないといけませんので、窓口となる際にはすべてを把握・理解しているように心掛けています。今後は、もう少しWebサイトに対してデザイン会社アカリヲがどのようなスタイル・仕組みで携わっているかをご紹介できればと思います。今回はこのあたりで失礼いたします。