デザイン・コーディング・マークアップ

Webサイトのデザイン制作、コーディング、マークアップを承ります。サイトの目的をきちんと理解した上で、全体から細部までの設計図を作成し、機能的で美しいデザイン、綺麗で見やすく使いやすいサイトを制作します。

デザインは目的を正しく理解することからスタート

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

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

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

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

Webサイト全体から細部までの設計図を作成

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

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

サイト構造設計

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

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

ページフロー設計

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

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

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

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

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

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

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

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

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

ご要望内容によっては、オリジナルのCMS(コンテンツ管理・更新システム)を制作するなど、本格的なWebシステムの開発も可能です。詳しくはシステム開発のページを御覧ください。

また、必要に応じてSEO対策(検索エンジン最適化)を強化するためのサイト構造の調整や、コンテンツの増強案作成などを行うこともできます。

ビジュアルデザイン

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

機能的で美しいサイトのデザインを追求

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

Webサイトは、そのサイトで達成すべき目的を、より達成しやすくするための機能を備えていなければなりません。

ECサイトなら、ユーザーが欲しい商品を簡単に見つけ、スムーズに購入できるための機能。ブランドサイトなら、そのブランドの印象を深め、ブランド価値を高めるための機能。

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

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

サイトのデザインは美しい脇役

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

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

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

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

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

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

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

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

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

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

コーディング・マークアップ

サイトを「欠陥住宅」にしないために

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

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

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

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

サイトの評価や価値が高まる論理的なマークアップ

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

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

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

マークアップ言語は案件に応じて柔軟に対応

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

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

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

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

様々な最新技術に対応

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

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

このページのトップへ