企画・デザイン

コンセプト作り

　やってみたい事を考え何のサイトを作るかが決まったら、サイトのコンセプトについて考えてみます。

　

　しかしコンセプトとはなんでしょうか？良く聞きますが意味が捉えにくい言葉です。日本語でいうと概念と言う事らしいです。

ja.wikipedia.org/wiki/概念

がいねん 【概念】
① ある事物の概括的で大まかな意味内容。
② 〘哲〙 事物が思考によって捉えられたり表現される時の思考内容や表象，
　 またその言語表現（名辞）の意味内容。

　

　サイト作りに置いてコンセプト作りとは、目的、目的を達成するための背景等を調査、分析し、意図・意匠・目的・作られるものが果たすべき役割等を概念とすることで、制作のための原理、原則を設定する事です。ただまとまった量のなにかを作業として勧めるだけでなく、何がしたいか、誰のために、何のために、どんな風に、それは何故？…そんな事をまず決める事は、制作と言う道のりを経て出来るモノが、何らかの「価値を生み出す」ことに役立つはずです。

情報収集・整理

　コンセプト作りに欠かせないのは、まずは情報を収集する事と、そして整理や選別をする事です。サイトで伝えたい事の情報を、調査収集しまとめます。そのうえで目的にあわせて整理して行くのです。

ターゲット

　サイト作りの重要な情報としてターゲットと言うものがあります。つまり、誰に見てもらうのかと言う事です。内容を訴えかける、年代、性別、職業、興味などの特徴を備えた人をターゲットユーザーと言います。ターゲットは一つではなく、年代でも幅がある場合や男女や性別を問わない場合もあります。サイトの目的にあったターゲットとはどんな人間像なのかを考える事は、サイト作りに置ける何かを決定するときにとても重要な要因です。

デザインコンセプトについて

　デザインコンセプトとはなんでしょうか？サイト制作で大切な要素の一つはグラフィックデザインです。どんなに良い内容や大切な事を訴えていても、デザインがマッチしていなければ、訴えている内容は伝わりにくかったり、体裁が整っていなければ内容が軽視されたりする事もあるでしょう。サイトのコンセプトにマッチしたデザインコンセプトを持つ事はサイト作りにおいてとても大切です。

　

　例えば基本となる色使い等を決める事もデザインコンセプトを構築する事の一つです。ただ、自分が好きな色を選べば良いのでしょうか？デザインにおいて色づかいはムードを生み出します。クールな色使い、暖かい色使い、優しい色使い、楽しい色使い、自然な色合い、…色はそういったものをひとにあたえます。

　

　また形にも、優しい形、固い形、柔らかい形、楽しい形、素っ気ない形、ごちゃごちゃした形、整然とした形、重厚な形、そんなものが生み出す雰囲気があります。

　

　配置もまた雰囲気を生み出します。詰まった配置にすれば情報感や色使いによっては楽しい雰囲気、隙間を生かした配置にすればゆったりとした雰囲気や、それらにメリハリを付ければ緊張感等です。色、形、配置、そういうものでサイトのコンセプトにあった雰囲気を出すにはどんな風にデザインすれば良いか…それを決めるのがデザインコンセプトです。もし、デザインのコンセプトがサイトのコンセプトにあったものならば、サイトで伝えようとしているテキストやコンテンツの意味は閲覧者により良く伝わるでしょう。

webページの構造について

サイトの構造について

トップページ、カテゴリーページ、第２階層、第３階層、
ランディングページ、LPO
サイト構成図

ページの構造について

ヘッダ、フッタ、メニュー、右メニュー、左メニュー、ユーティリティーパン屑、
スケルトン

スケジュールについて

ガントチャート

全体のスケジュールのチャート図

チケット

個別の作業項目

マイルストーン

スケジュール全体での進捗をはかる目標点

アジェンダ

ある時期までにやるべき事、計画。

素材について

　企画や設計が決まれば、今度は素材を集めたり作ったりする必要があります。今回は分業のためサイトのグラフィックデザインそのものもその素材とする事にします。

1. タイトル、キャッチコピー
2. サイトグラフィックデザイン
3. 各記事原稿
4. 各記事関連写真
5. 各記事関連、図、イラスト、地図
6. その他いろいろ

　これらを作ったり集めたり、チームで手分けをしながら進めるのが素材作成・収集です。

　

　また、これらが集まるに従って企画時に見えてこなかった事が見えてくる場合があります。手に入るだろうと思っていたものが、実は無理だったり、作ってみたデザインがコンセプトと合わない事がわかったり、また、一番よくある単純な出来事は、何かの作業に思っていたより時間がかかる事です。（もちろん思ったより早く出来てしまうこともありますが。）そう言う場合、計画や設計の見直しと変更が必要かもしれません。だれにも未来は予測できないので、思った通りに行かない事は沢山あります。投げ出さずに臨機応変に制作を進める事が大切です。

　

　これらがある程度出来てきたら、やっとコーディングが始まります。ただし、すべてが出来てから始める必要は無いと思います。

　

　コーディングを開始する基準は、タイトル、キャッチコピーが決り、グラフィックデザインが出来た時だと思います。デザインがある程度固まったと所から、デザインの素材加工（スライス化や切り出し）を始めながら、平行して、素材集めや現行の執筆を進めるのが良いと思います。（何も出来る前からコーディングを進める事も出来ますが、やはりいろいろな事を予測しながら進める必要があるため、ある程度経験が必要です。静的なページを構築する場合、コーディングだけを先に進める必要はそれほど無いので、今回はこの基準が適しているでしょう。）

　

　それぞれの作業にはそれぞれの依存関係があります。うまく進めるため工夫をしましょう。ガントチャートは全体を見渡すのに役に立ちます。

コーディングに進む….htmlの基礎へ→

jwu-web.i-elements.net/html/

---

ユーザエクスペリエンスについて

人に何かを伝えようとする事は様々な複雑さと向き合う事でもありますが、見る人の視点に立って物事を考える事が、様々の問題を解決するヒントになります。

ターゲットユーザ

どんな人達が使うかと言う事。見てもらう目的の人たちがどのような人たちであるかと言う設定。

ペルソナ

具体的な見に来た人の設定。ターゲットユーザーはもちろん、ターゲットでない人たちもペルソナとして有用である場合もある。

ストーリー

ペルソナが具体的にどんな行動をするかと言う想定。

UXデザイン

見に来た人が、ページによってどんな体験をするかと言う事そのものをデザイン設計する事。
作ったものがどんな風に見せるかと言う事より、何を体験してもらうかと言う事そのものを設計する。

　

　来た人が何を体験するかそのものを設計する（期待値はその体験の中で情報の獲得や、サイトの目的の達成）ことでサイトでの閲覧者の目的の遂行を手助けするには伝える側がなにをするべきかを考える。

　

　例えば、インターフェースの視認性の強弱により閲覧の道筋を誘導する方法や、そのサイトへの誘導そのものにランディングページ（通常はトップページだが、それを修飾し、予告するページ。トップページそのものをユーザの体験のために工夫する事はもちろん基本。）をもうけることで、目的意識を持ってもらう事や、動画によるリニアな情報伝達も方法の一つだろう。

　

　ページによる情報の切り分けも、伝えたい人が表現する事を基準に分類するのではなく、見に来た人が何をしにきたかを基準にページ分けやフローが出来ていれば情報はより正確に的確に伝わり、目的も達成されやすく、サイトの価値を高める効果があるだろう。

万物は流転する

工夫

デザインについて参考

ミニマルデザインのススメ – 基本知識と7つのヒント

blog.btrax.com/jp/2013/09/16/minimal-design/

デザインに立体表現を取り入れるときのセオリー×6

sogitani.baigie.me/2013/09/killtheflatdesign/

コレクションに追加したい、新作フリーアイコン素材まとめ 2013年9月度

photoshopvip.net/archives/54320

色が人の心理と行動に与える影響とは

blog.btrax.com/jp/2013/09/05/color/

たった４つのWEBデザインの基本法則

bazubu.com/conversion-dsg-12209.html