Webサイトのデザイン制作・コーディング

デザイン基本方針

多くのインターネット利用者は、何らかの目的を持ってWebサイトを訪れます。サイトの役割は、訪れた方に求めている情報を適切に提示し、誘導し、共感してもらい、時には新たな気付きを与え、最終的に目的を満たして満足してもらうことです。

そんなWebサイトを作るためには、しっかりとした設計図を作ることが重要。制作は、「どのような相手に何をしてもらうことが目的なのか？」をお客様からお伺いし、ご相談することから始まります。

何か御社が抱えている課題があればご相談いただき、その課題を確実に解決することが私達mmjの仕事です。

情報を伝えたい相手（ユーザー）と、目的を明確にすることで、どんなコンテンツ・ページが必要で、何を強調すべきなのか、どのように構成し、目的に誘導し、ユーザーにどんな行動をしてもらうか等、必要な判断を行うことができます。

デザイン制作フロー

まず最初に「構造」「ページフロー」「ワイヤーフレーム」「ナビゲーション」の設計と、対応デバイス・ブラウザーや運用の仕様策定を行います。

各設計はある程度段階的に行っていきますが、相互に関連する内容のため、並行して調整を進めます。

構造設計

掲載する情報をどのようにグループ分けして、どんなグループ名をつけていくかを整理し、それぞれのページにどのようなコンテンツを掲載するか、概要を決定していく作業です。

情報量のバランスや階層の深さ、階層の数などを考慮しながら、ユーザーにとってに分かりやすい構成になるように設計します。

ページフロー設計

ユーザーが、どのように遷移するかを想定した設計図を作成します。この設計を行う事で、目的を達成するまでのステップ数が多すぎないか、行き止まりになってしまうことがないか、などを予めチェックすることができます。

ユーザーの状況や目的は、全員が全く同じということは有り得ないので、通常複数のページフローを想定して設計します。

ワイヤーフレーム・ナビゲーション設計

各ページに、具体的にどんなコンテンツを、どんなレイアウトで配置するか、どれくらいのボリュームの情報を入れるのかを決めていくワイヤーフレーム設計と、リンク設定をどうするか等を決めるナビゲーション設計を行います。

これが完成すると、お客様側でも、どんな物になるのかを具体的にイメージして、確認して頂くことができますので、「こんなはずじゃなかった」といった事態が起こりにくくなります。

デバイス・ブラウザー・運用の仕様策定

iPhoneやAndroid、グーグルクロームやインターネットエクスプローラー等、動作保証対象となるデバイスやブラウザの決定、アクセシビリティガイドラインへの準拠の有無、ドメインやレンタルサーバ等の選定、ワードプレス等のCMS（コンテンツ管理・更新システム）を導入するかどうかなど、制作に必要な各種仕様を決定します。

ワードプレス等のCMSを導入する場合には、今後長く運営する担当者様ができるだけ負担無く、ページを更新できることが大切です。

基本設計の段階で、御社の運用プランやルールをお聞きしながら、適切なカテゴリ構造やアクセス権の設定等、更新担当者様が使いやすいように配慮します。

ご要望に応じて、オリジナルCMS（コンテンツ管理・更新システム）の制作など、本格的なWebシステムの開発も可能です。

また、必要な場合はSEO対策（検索エンジン最適化）を強化するための構造の調整や、コンテンツの増強案作成等を行うこともできます。

mmjが目指していること

デザインとは、メッセージを相手に伝えるための手段です。mmjは、御社が想定されているターゲットに伝えるべき情報を、どのような表現方法で伝えるのがベストかを考え、形にします。

機能と美しさの融合

「デザイン」とは見た目を美しく成形・装飾することでしょうか？確かにそれもありますが、それは１つの側面でしかありません。mmjは、デザインとは「機能的で美しい物であるべき」と考えます。

Webサイトは、達成すべき目的を、より達成しやすくするための機能を備えていなければなりません。ECなら、ユーザーが欲しい商品を簡単に見つけ、スムーズに購入できるための機能。ブランドなら、そのブランドの印象を深め、ブランド価値を高めるための機能。

Webサイトに必要な「機能」は、取り扱っている商材や、提供している情報の内容、目的によって様々です。

そして、それらの「機能」をより高め、付加価値を上げるための「美しさ」を取り入れ、「機能」と「美しさ」が融合してこそ、優れたデザインと言えるのです。

美しい脇役

Webサイトにおける「美しさ」は、見せるべきコンテンツを適切に見せるための美しさでなければなりません。主役はあくまでも、「サイト」という器ではなく、その中身（コンテンツ）です。

デザインの要素には、レイアウトや色使い、目を止めてもらうためのアイキャッチ、商品写真の引き立て役となる装飾、情報の視認性や伝達性を高めるためのピクトグラムや図版等、様々な物があります。しかし、一番大切な物は「コンテンツ」だということを、mmjは忘れません。

サイトのメッセージ、伝えたいことを見る人の心に訴えかけるために、デザイン要素が美しくあること、つまり「美しい脇役」になることを目指します。

綺麗で見やすく、使いやすいを目指して

Webサイトは、見やすく、分かりやすい物であるべきです。そうあってこそ、閲覧者がストレスなく目的を達成することができる「使いやすい」として、支持されるようになります。

「見やすい」「分かりやすい」「使いやすい」を実現することが、mmjの目標です。

「見やすい」「分かりやすい」Webサイトとは？

• どういうサイトなのかが明確
• 情報のグループ分けが明確で、どこに何があるのかすぐ分かる
• クリックできる物と、そうでない物の区別が明確（ボタンがボタンだと分かる等）

「使いやすい」Webサイトとは？

• 探している物がすぐに見つかる
• ページを移動しやすい
• 注文や問い合わせ等、目的を達成するまでに時間がかからない

コーディング・マークアップ基本方針

検索サイトからの評価や更新性が高くなる文書構造を意識

調査、企画、設計、デザインを経て、いよいよそれらをインターネット上に公開できる形式のファイルにするのが「コーディング」と「マークアップ」です。

コーディングは、コンピューターが処理できるソースコードを入力して、ページを表示するためのファイルを作成する作業。マークアップは、文書の構造や画像、大見出し・小見出し等の要素を、コンピューターが正しく認識できるように意味づけしていく作業です。

コーディングやマークアップで記述されるHTMLやCSSといったコードは、基本的には閲覧するユーザーの目に触れることはありませんが、非常に重要な要素です。

例えば、住宅建築を想像してください。ものすごく外観が素敵な建物でも、使われている資材の質が悪かったり、建築工法に不手際があれば、それは欠陥住宅ということになります。Webサイトにも同じことが言えるのです。

ブラウザでの表示が同じでも、どのようなタグを使用してどのようにマークアップするかで、「目に見えない部分」の価値が変わります。マークアップの出来次第で、検索順位が大きく変わる可能性もあるほど重要な部分です。

ページ内の各要素がどのような意味を持ち、それぞれにどのような重み付けをするべきか等、文章や構造を論理的に表現する必要があります。それが、検索サイトからの評価や、更新性を高めることにもつながります。

mmjでは、検索サイトからの評価や更新性が高くなる文書構造を意識した、W3C(World Wide Web Consortium)の定める規格に沿った、世界標準のマークアップをおこなっています。

言語は案件に応じて柔軟に対応

言語は、HTML5/4、CSS3/2、場合によってはjQueryなどの技術も導入しながら、制作をおこないます。

現在、Webの世界では、最新版の言語であるHTML5やCSS3が使われることが多く、それが当たり前になりつつありますが、最新の言語に対応していない古いブラウザを利用しているユーザーも少数ながらいることは確かです。

また、今やごく稀な例ではありますが、ガラケー（フィーチャーフォン）向けなら、XHTMLやCHTMLが望ましい場合もあります。

Webサイトの種類やお客様の業種によって、ターゲットユーザーの年齢、性別など、特性は異なります。mmjでは、しっかりとデータを収集し、ユーザーの特性を理解した上で、どのようなマークアップ言語を採用するべきか、ご提案しています。

様々な最新技術に対応

サイトで動きのある表現が必要な場合はJavaScript等を使い、1つのファイルでPC、タブレット、スマホのそれぞれに最適な形で表示する必要があれば「レスポンシブデザイン」にする等、マークアップには様々な技術が存在し、日々、進化しています。

mmjでは、常に新しい技術を吸収し続け、最適な技術を実戦投入しています。