クリエイティブ関係者がよく使う言葉、

「コンセプト」「テーマ」「アイデア」「トンマナ」。

例えば、

今回のサイトコンセプトは◯◯です！とか

今回のサイトのモチーフは◯◯です！とか。

頻繁に使われていますが、コンセプトって何？と言われたら、

きちんと答えられる人は少ないのではないでしょうか。

言葉は多くの人が使えば使うほど、本来の意味が曖昧になってしまいます。

頻繁に使われている言葉の意味が、人によって異なった解釈がなされると、

チームで動くときの障壁の一つになってしまうので、改めて確認しよう。

という話が社内のデザイナーであったので、

せっかくなのでブログにまとめて残しておきます。

  ■目次

ーそれぞれの言葉の意味

　▼テーマとは

　▼コンセプトとは

　▼アイデアとは

　▼トンマナとは

ーまとめ・感想

それぞれの言葉の意味

今回、言葉の意味は全てクリエイティブにおける言葉の定義です。

例はサイト制作で考えていきます。

▼テーマとは

テーマとは、一言で言うと「お題」のことです。

例えば、◯◯企業のコーポレートサイトであったり、2019年度の採用サイトであったり。

テーマはこちらで変えられないもので、ビジネス上提示されるものです。

「何か作ってください」みたいな案件はまずなくて、

クライアントが求めているものがテーマになります。

▼コンセプトとは

コンセプトとは、一言で言うと「何を伝えたいのか」ということです。

例えばコーポレートサイトで言うと、その会社が大切にしている理念であったり、

そのサイトを見てお客様にどう感じて欲しいか。

採用サイトで言うと、このサイトを学生が見たときにどう感じて欲しいか。

なんならその年の採用方針とコンセプトがイコールのようなものです。

コンセプトの部分は、複数の人が集まって議論すると言うよりは、

プロジェクトの責任者や、お客様が決めきってしまうことが大切です。

▼アイデアとは

アイデアとは、一言で言うと「切り口」ということです。

コンセプトをどのように表現するのか。これがアイデアです。

例えば、色んな人がいる会社をコンセプトにしたときに、

人を動物に例えて色んな人がいることを表現してみよう！とか

人を形に例えて色んな人がいることを表現してみよう！とか。

アイデアは複数の人で持ち寄って発散する方が切り口が沢山できて良いとされます。

参考サイトなども初めてこの段階で持ち寄られます。

▼トンマナとは

 トンマナとは「トーン＆マナー」の略で、

「デザインに一貫性を持たせること」「見た目」を指します。

サイト全体のイメージをスッキリさせよう！とか

企業のイメージカラーとサイトのカラーを合わせたり。

ユーザーに違和感なくサイトを見てもらうためにもトンマナを守ることは大切です。

まとめ・感想

こう改めて文字におこして見ると、言葉って難しい！！！

曖昧な解釈で言葉は使わない方がいいなあと実感しました。

今回の話だとコンセプトとアイデアがごちゃ混ぜになってしまいがちなので、

気をつけないとなあ。と思います。

テーマ▶︎コンセプト▶︎アイデア▶︎トンマナ

サイト制作はこのような流れで思考していくのが一般的です。

ただこの全工程をプロジェクト全メンバー進めるというわけではありません。

ディレクターがお客様がテーマとコンセプトをすり合わせに責任を持ち、

アイデアとトンマナのところをデザイナーが責任を負うといったように、

思考のセクション分けをしていくことが大切です。

仕事において、職種ごとに責任を負うものが変わってきます。

これは技術職だけに言えることではないなあと思います。

それぞれが自分の職のやるべきことに責任を持たなければ、いいものはできない。

デザイナーであれば見た目の全責任を負う。

それぞれの職種はどんな責任を負っているのか聞いてみたいです。

Webサイト制作界隈でよく耳にする「UI」や「UX」。

違いは何となくわかっているもののきちんと説明してと言われると上手くできない。

最近先輩にUXを現実世界で捉えるとどういうことなのか教えて頂き、

とてもしっくり来たので、今回は自分の経験に被せて説明してみようと思います。

また「Web制作者のためのUXデザインをはじめる本」

こちらも読んだので、この本で学んだことも交えてまとめていきます。

■目次

ーUIとUXの違い

　▼UI（User Interface）とは

　▼UX（User Experience）とは

ー現実世界で捉えるUIとUX

ーまとめ・感想

UIとUXのちがい

▼UI（User Interface）とは

UIとは、Webサイトやアプリなどの画面周りのことで、

ユーザーと直接接触がある部分のことを指します。

現実世界でいう製品やサービスそのもののことを指します。

▼UX（User Experience）とは

UXとは、ユーザー体験とも訳されており、そのものに直接接触がある時間だけでなく、

その前後の時間や、それをきっかけとした記憶などユーザーの感じる全てを指します。

現実世界では、製品やサービスに関連するもの全てを指します。

UXのほんの一部がUIととらえてもらっていいでしょう。

UIは「モノ」で、UXは「コト」と捉えるとわかりやすいです。

ー現実世界で捉えるUIとUX

現実世界で捉えると？と言う話を先輩は「フジロック」で説明してくれました。

が、私は行ったことがないので、自分の言葉で伝えるとなると何だろう・・・

と考えた時に、自分の好きなカフェが説明しやすい！と思ったので説明していきます。

今回はカフェ好きの友人と一緒にカフェに行くと言うことを前提でお話します。

〜STORY〜

私はカフェがとても好きです。

カフェではよくコーヒーかカフェラテを注文します。

そもそもコーヒーは小学生くらいから好きで家でもよく飲んでいました。

カフェ好きの友人がいるのでよくその友達とカフェに行きます。

もちろん一人でも行きます。

〜〜

ここでいうUIはカフェにそのもの。

カフェで提供されるモノ（メニュー）やカフェの空間がUIに当たります。

もちろんコーヒーの飲みやすさや味がよければ満足度は上がりますし、

空間が気に入れば、また訪れたいと思います。

これがUIが良いと言う評価にあたります。

ではUXは何にあたるでしょうか。

私がカフェが好きな理由はコーヒーや空間を楽しむ以外にもあります。

・カフェ滞在前

・どこのカフェに行くかインスタや食べログ、雑誌を見て情報を集める

・調べた情報を友人と共有してワーワー言いながらどこに行くか決める

・その店に行ったことのある人のインスタの写真を見て想像を膨らます

・食べログの数値を見て期待を膨らます

・メニューを見て何を頼もうか想像する

・カフェ滞在中

・コーヒーを楽しむ（UI）

・空間を楽しむ（UI）

・友達と話に花を咲かせる

・カフェの写真を撮る

・次に行くカフェの計画を立てる

・カフェにいるおしゃれな人をみて参考にする

・カフェ滞在後

・撮影した写真を見返してインスタにあげる

・カフェの感想を他の友人や家族に話す

上記全てがUXに当たります。

カフェに関連する全てのことがUX、ユーザー体験です。

UXの中にUIがあるのは見てわかりますね。

ーまとめ・感想

現実世界に例えてUI・UXを捉えるとなんだかスッと入って来ます。

ただこれを実際のビジネス、サイト制作に置き換えると途端にわからなくなる。

それは普段自分たちがユーザーになりきれていないからなのだと思います。

サイト制作においてUXデザインを考える場合、

一番大切なのはユーザーの気持ちを理解することです。

ユーザーはどんな人で、何に価値を見出し、

そのためにどんな行動をし、具体的にどのような操作をして行くのか、

そこをまずは考えなけれはUXデザインはできません。

そのプロセスの中で課題が出て来たら、そこを解決するために

Webサイトでは何ができるかを考え作れば良い。

UXデザインと言いますが、ここに置いてのデザインは設計という意味です。

そこが重要でそこがとっても難しい。

「Web制作者のためのUXデザインをはじめる本」には、細かくその導き方が乗っているので、

UXデザインに興味がある方は是非読んで見て欲しいです。

先日先輩デザイナーと話していて、

日本と海外ではデザインに対する価値観が違うという話になりました。

アーカイブされているサイトデザインを見比べても、

日本と海外の評価されているサイトには違いがあります。

日本のサイトは見た瞬間なんのサイトかわかるし、

必要な情報がわかりやすく整理されている。なんなら必要以上に情報が乗っている。

そんなサイトが評価されています。

一方で海外のサイトは、一見なんのサイトなのかよくわからないものが多い。

情報をまとめるための！というよりは、目を惹きつけるようなデザインが多い気がする。

ただ、だからこそかっこいい。

そんなサイトが評価されています。

この違いはなんなのでしょうか。

またサイトだけでなくデザインに対する価値観の違いがわかりやすく表現されているのが、

映画のポスター！！！

映画のポスターからわかる日本人のデザインへの価値観

有名なのがこのポスター！

左が海外のもので、右が日本のもの。

どちらがイケてると聞かれて、見た目だけでいうと圧倒的に海外のものの方がイケてる。

（個人的な価値観だけど・・）

ただ、右のポスターの方が情報が沢山乗っていて、どんな映画なのかがわかる。

日本人が興味を惹きつけられるのは右なのだろう。

まとめ・感想

海外に比べて日本ではデザインにも成果が求められている気がします。

なんかいい感じ！といった感覚だけで日本人は行動しないし、

きちんと情報を集めてある程度結果が見えてから物事を判断し、行動する国民性にも

関係があるのかな？とも思いました。

ポスターも広告の一種なので、それが間違っているとは思わないけど、

日本の広告は世界的に見ても説明好きらしい。

沢山の情報の中から自分が必要な情報を取捨選択する。

曖昧な情報では不安になっちゃう日本人だからこそ、

こういったデザインが評価されるのかな。

GoogleよりもYahooの検索エンジンの方が使いやすく感じたり、

楽天のような少しごちゃごちゃしたサイトでも、嫌に感じないのも、

何か関係してそうです。

サイト制作するときに、

海外のいけてるサイトを参考にしようとすることもありますが、

日本人に合わせて工夫しないといけないな〜と思いました。

誰が使うか、誰が見るのか、そこも考えてデザインしていかないとです。

▼おまけ（構造化の練習）

日本はどうしても内容訴求が多い傾向のようです

「マテリアルデザインライト」という言葉を最近色んな記事を見ている中で目にしました。

そもそも「マテリアルデザイン」だけでも、

なんとなくこういうものだ！というのはわかるものの、

きちんと説明できるレベルでなかったので、これを機にお勉強しました。

マテリアルデザインとマテリアルデザインライトってなに？

まとめていきます。

マテリアルデザインとは

マテリアルデザインとは、現実世界の物質が持つ性質をデザインに取り入れたものです。

これはもともとどのようなデバイスでも直感的に理解できるような

デザインを作成する必要があるということで、

現実世界のルールをデザインにも反映させよう！といった流れで誕生したようです。

フラットデザインのようなシンプルさを持ちながら、

現実世界にあるものを用いてわかりやすさを追求したものを、

マテリアルデザインと言います。

現実世界を表現するためには、3次元で表現する必要があります。

3次元をデザイン上で表現するために光と影をうまく利用しています。

現実世界を表現するためのルールはたくさんあって、

それを全て守ってデザインをするのは難しいので、

テンプレやフレームワークを用いて作成することが多いようです。

マテリアルデザインライトとは？

マテリアルデザインライトとは、マテリアルデザインの概念を引き継ぎ、

あらゆるデバイスで最適化されたものと言われています。

いうなれば、マテリアルデザインの進化版のようなもので、

特に目的などは変わっていません。一貫して使いやすさを目的にしています。

マテリアルデザインライトにもテンプレやガイドラインがあるので、

それを用いて作成できるようです。

マテリアルデザインよりもコンポーネントが沢山あるようなので、

部分的に活用することもできるみたい！

まとめ・感想

調べていくうちに、マテリアルデザインとマテリアルデザインライトは

概念は同じで、ユーザーの使いやすさ、わかりやすさを追求したものだということがわかりました。

大きな違いは残念ながら見つけることはできなかったのですが、

どうやらテンプレートやガイドラインがバージョンアップしていて

さらに使い勝手がよくなったものらしい。

普段デザインをしていてテンプレなどは使ったことがないので、

今度使ってみようかな・・？

今までそういったことがあったのか他のデザイナーにも聞いてみます。

テンプレなどを使わなくても、現実世界の表現を参考にすることは多く、

影の付け方とかはかなり意識しています。

「実際ものを重ねた時、影はどう映るかな？」

と実際ものを重ねて観察してデザインに反映させることもあります。

ユーザーが違和感を感じることがないように、

ユーザーが理解しやすく、使いやすくするためにできることは、

積極に取り入れていきたいものです。

デザインのトレンドの変化を調べていくと、

時代の変化にデザインも追いつこうと必死なんだなあ・・ということがわかります。

いろんなデバイスでいつでもどこでもサイトを見られる時代だからこそ、

ルールを統一してデザインをわかりやすくする必要がある。

世の中から見にくいサイトが消えていくのも時間の問題だろうな。

と思いました。

ユーザーありきのデザインって大変だ！

世の中のデザインにはいろんな種類があるけれど、

Webデザインは工業デザインなので、ある程度型が決まっています。

型がある程度決まっている中で、

デザインするということの難しさを最近実感しています。

最近初めてメインデザイナーとしてサイトを作ることになったのですが、

デザインを考えていくうちに、使い勝手のことを考えすぎて、

控えめなデザイン、普通のサイトになってしまいそうになったり。

案件の下層ページが全部似たようなものになってしまったり。

そんな時にこの記事を読んでなるほどなあと思ったので展開。

 記事の内容

内容は是非読んでほしいけれど、要約すると、

時代の流れでWebデザインは理論、計算して作るもの、

個性や感性から生まれるものではないという認識が強くなってきて、

さらにAIの登場である程度は機械ができるようになってきている。

でもそんなことしてたら全部が似通ったものになってしまう。

そんな時代だからこそデザイナーは機械ができないこと、

「なんかイケてる」を創りさなきゃいけなくて、

「しっくりくる！」を生み出せるのはデザイナーが 創り出す「エモさ」みたいなもの。

的なお話。まとめるの難しいから読んでほしい！w

感想

この記事を読んで、表現の仕方は置いておいて、

この気持ちは忘れちゃいけないな〜と感じました。

私がこの記事を読んで思ったのは、ある程度型ができているこの領域では、

沢山勉強すれば平均点のものは作れるようになるけど、

それ以上にはなれないな〜ということで。

私が目指している自分の名前で仕事がもらえるデザイナーになるためには、

「自分だからできるデザイン」

「自分がやりたいデザイン」をすることが大切なんだなあ・・・と。

そのためには案件以外のところで、誰のことも気にせず、

自分が作りたいものを作ることがとても重要だなと思いました。

普段先輩から言われていることですが。

先輩にこの記事を読んで感想を聞かせてもらったのですが、

「自分の好きな表現をいれることの大切さ」は共感したとのこと。

全案件にこれは意識して入れているそうです。

私の中で、まだ自分ならではのこうしたい！がないな〜と思ったので、

一刻も早く自分ならではのこうしたい！を見つけたいと思いました。

そのために、まずは自分がどんなデザインが好きなのかを理解して、

実際デザインするってなったらどういう技術が必要なのかを考えて、

勉強して、実践して、を繰り返さねば・・・！

沢山いろんなサイトみて勉強しよう。

デザイナーとして、自分らしさを持つことの大切さを学んだ今週でした。

以前同じような記事を投稿したのですが、

実際どんな思考でデザインに落としているのかかけていなかったので、

WFからデザインに起こすまでのお話~part2~！

以前の記事はこちら↓

実際の案件に関わって、

以前よりもワイヤーフレームからデザインを完成させるまで、どのような思考で進めていくのか。

なんとなくその感覚を掴んできたので、まとめていきます！

ワイヤーフレームとは

まず、ディレクターが作成してくれるワイヤーフレームはどんな役目があるのか。

ワイヤーフレームとは、一言で言うと「サイトの設計図」、

どこにどんな要素、機能が入るのかを示してくれるものです。

また実案件ではお客様と制作側の認識を視覚的に合わせるものとしても使われています。

デザインしてからお客様に見せて、「必要としている要素が入ってない！」

なんてことが起こらないようにワイヤーフレームを作成した時点で、

お客様にしっかりと確認していただきます。

実際にワイヤーに起こしてみると、これって本当に必要なのかな？

と客観視してみることもできるので、

ワイヤーはとても重要な役割を持っています。

ワイヤーフレームからデザインへ

まずワイヤーを紙に印刷してじっくりと眺めます。

紙に印刷するのは疑問に思って点などを素早く書き込めるから。

全体を眺めて疑問などがなければデザインを初めていきますが、

疑問がある場合はディレクターに確認します。

ここで疑問を持ったまま進めてしまうと、

ディレクターが思っていたアウトプットとデザイナーが作成するアウトプットが

異なるものになり、結局はお客様の求めているものと異なるものになってしまいます。

しっかりと認識を合わせて実際に手を動かしていきます。

まずは割付から。

ワイヤーの通りに要素を配置させていきます。

割付の段階でどんな感じにしようか考えながら進めていきます。

イメージが湧いていればそのままデザインを続ければいいのですが、

なかなかそういうわけにもいきません。

なので、必要な要素などがわかった上で参考になりそうなサイトなどを探していきます。

トップページなどの少し自由の効いたデザインをする際は、

サイトに限らす、グラフィックなども見たりしてイメージを固めていきます。

サイトであれば、複数のページに及んで一つのアウトプットとなるので

統一しないといけない箇所（カラー・フォント・フォントサイズなど）は統一していきます。

トンマナ（トーン＆マナー）をはじめに決めて進めると効率的に進めることができます。

そしてイメージがある程度固まった段階で作り込んでいくわけです。

ワイヤーフレームはあくまでも設計図なので、

それに引っ張られすぎないようにしなければいけません。

そこが私の苦手なところでもあります・・・（笑）

サイトのリニューアルなどの時は、今のサイトをよく見ます。

今のサイトよりよくなった！とお客様に思ってもらえなければ、意味がありません。

言い換えれば、今のサイトと大きな違いを作らないといけない。

サイト内の構成が大きく変わることもありますが、

ほとんどはビジュアル、デザインの変更をお客様は求めています。

先輩社員にデザイン説明の時に

「ワイヤーフレームがこうだったから」

「今のサイトでこうなっているから」

という説明だけはやめよう！と言われています。

デザイナーは見た目の部分にフルコミットです。

ディレクターはデザイナーの発想の幅を狭めないように、

あえてシンプルにワイヤーを描いてくれていたりもするそうです。

あくまで信頼ありきの話ですが・・！

という感じで時間の許される限り作り込んでいきます。

感想・まとめ

実案件で、ワイヤーを元にデザインをしていく機会が増え、

私がいいなあと思ったのは、デザインをしていく中で、構成などを変えたい！

となった時にきちんとした根拠があれば、ディレクターはそれを受け入れてくれるということ！

本当にいいサイトを作りたいと思っているからこそ、

いろんな視点から制作できるのがいいなあと思いました。

見た目の全責任をデザイナーがおっているということを

きちんと理解し、考え抜くということをこれからは意識してデザインしていきます！

Webデザイナーとしてお仕事をしだしてから5ヶ月が経とうとしています。

最近は案件にも関わらせていただけるようになり、

先日初めてサイトローンチまで見届けることができました！

案件に関わって初めて気づいたデザイナーとしての役目や、

デザインの楽しさ、サイト制作の楽しさ、そして大変さ。

今だからこそ感じているものもあると思うので、ブログに残しておきます。

サイト制作の流れ

まずはじめにサイト制作は数日で終わるものではありません。

ローンチまでに3ヶ月ほどかかります。

（サイトのボリュームなどにもよりますが、コーポレートサイトなどはそれくらい）

色んな人が関わってさいとはできていくのです。

まずはじめに、ディレクターがクライアントとサイト制作をして

どんな課題をどう叶えるのかのすり合わせをして、

サイトのコンセプトを決めていきます。

その後の制作工程の、ワイヤーフレーム作成やデザイン、コーディングが、

本当にこれで進めて良いのか判断するときに、

コンセプトが実現するかしないかで判断していきます。

コンセプトは関係者の共通認識を取るためのものでもあります。

コンセプトが決まると、ディレクターがワイヤーフレームを書いていきます。

クライアントと参考サイトなどを持ち寄って、すり合わせなどもしていくようです。

ワイヤーフレームが固まるといよいよデザイン！

ワイヤーに載っている情報が本当に必要なのか、

不足しているものはないかなどもデザイナーは確認します。

そのあと何周もヘッダーからフッターまでの作り込みを何度も繰り返し、

納得するまでデザインしていきます。

デザインをするときは、ホバーした時の動きや、

デバイスサイズが変わったときなどはどう見えるのかも

しっかりと考えながら作成しなければなりません。

デザインが完成するとその次はコーディングです。

デザイナーがどういった動きを想定してデザインを作成したのか、

そのあたりのすり合わせをしっかりと行います。

動きのすり合わせを行うMTGでは擬音語がとびかいます。笑

シュンッとした感じで・・・とか。笑

コーディングを行いながら、サーバーの準備などをしていきますが、

どのブラウザで見ても崩れのないようにする必要があるので、

テスト環境を用意して、実際にどう見えるのか、どう動くのかを確認していきます。

ローンチ前はメンバー総動員で崩れや表記揺れやがないかを確認します。

粗探しをして、それを一つ一つ潰していき・・・

クライアントに確認していただき、ローンチするわけです！

サイト制作でのデザイナーの役目

サイトローンチまでを経験して感じたデザイナーとしての役目ですが、

デザイナーは見え方を誰よりも気にしないといけない。

正直これのみです！

いくらクライアントの要望とはいえ、

それは絶対によくない！というものはきちんと言わなければなりません。

サイト制作のクオリティー担保はここにかかっていると思います。

ただ、「これはなんか変だからやめよう。」と言ってもクライアントは納得しないので、

きちんと納得できるように説明する力も必要です。

もちろんサイト制作は、あくまでもクライアントありきなので、

どんなにこっちがいいと思っていたとしても、

クライアントに違うと言われればクライアントの要望に合わせるしかありません。

そこがデザイナーの苦しみでもあるな・・と思いました。

一番はじめに提出したデザインと全く異なるデザインでFIXすることなんてザラにあります。

でも、だからこそ、一発目はデザイナーのベストを尽くした状態でなければ

だめだなあ・・！とも思いました。

まとめ・感想

初めてのサイトローンチを経験して感じたこと。

それはサイト制作って楽しい！ということです。

ディレクターとデザイナーとコーダー。

それぞれが自分の役目をしっかりと果たさなければ完成しない。

いいものを作りたい！という一人一人の思いがあるからこそ、

一人では決して完成しないことがわかっているからこそ、

チームワークが発揮されるんだろうなあ・・と思いました。

どうデザインすればコーディングしやすいかな？

どうデザインデータを作成すればコーディングしやすいかな？

そんなことを無意識に考えていました。

自分が作ったデザインが実際に動いているのとかを見ると、

本当にワクワクします。

サイト制作って面白い！！！！！

この気持ちはずっと持っておきたいです。

今週AppleからiphoneXが登場しましたね。

Web系の制作会社の人達はザワザワしたのではないでしょうか。

iphoneなどシェアの高いデバイスに合わせて、

サイトのデザインなどもしていくので、

新型のデバイスがでたらいち早く情報をキャッチする必要があります。

iphoneXが出ることによって考えられる変化を簡単にまとめます。

考えられる変化

・幅が375×667px→375×812px

ホームボタンが完全になくなり、画面がとても大きくなったので、

ファーストビューのエリアが増えますね、、、！

・解像度が3倍解像度

制作側で用意する画像や素材も解像度に合わせて用意しなくてはいけません。

ベクターデータで用意するのがいいみたい、、、！

・画面上部にセンサーエリアがあり、いびつな形になっている

凹凸のある上部をどう対応していくのでしょうか、、、

この辺はやり方が色々ありそう、、、

まとめ・感想

月曜日この情報をキャッチして会社にいったら、

先輩社員の皆さんがこの話をしていてさすがだなあ・・と思いました。

お昼にみんなでこの話をしていたのですが、

正直本体自体が少し根が張るので、そんなにシェアはとれなさそうだから、

そこまでめちゃくちゃ気にすることはなさそう・・・

ともなりました。

こういった最新トレンドのキャッチアップめちゃくちゃ大切です。

ちなみにiPhoneXのページの動きかっこいい。

近年インターネットビジネスが加速し、

良いものを好きなときに安く手に入れられるようになりました。

そのような時代背景から同じクオリティのものが安く買える時代、

名前(ブランド)ではなく質で選ぶよう時代になってきていると言われています。

この時代の変化がWebデザインにも影響してきています。

無印良品なんかがいい例です。

（https://www.muji.net/store/）

ブランドレスデザインとは

この時代の変化はWebデザインにも影響しており、

ブランドレスデザインというものが増えてきています。

ブランドレスデザインとは、あえてブランド面は訴求しない

シンプルなデザインのことをいいます。

ブランドレスデザインのデザイン的なビジュアル面でいうと、

過度な着色を行わずにテキストや画像が生えるように、

白背景にグレースケールの要素をのせたり。

今後の流れとして、ブランドやデザインの主張というよりも、

コンテンツを強化する必要があると言われており、

こういったブランドレスなWebデザインが増えていくと言われています。

まとめ・感想

私もこの時代の流れに合わせてWebデザインを作成していく必要はあると思います。

ただ、化粧品や服、車などブランド重視される商材に関しては、

この流れは全く無視して良いと思いました。

商材に応じてこの考えを取り入れるかは考えた方が良さそうです。

スマホサイトを作成している時に悩むポイントの一つである

ナビゲーションメニューの配置。

PCサイトではヘッダーに記載されていることが基本ですが、

スマホサイトの場合はスペースが狭いため、

どうにか工夫をしなければいけません。

一般的にはハンバーガーメニューというものを用いる事が多いのですが、

ハンバーガーメニューにも賛否両論有るみたいです。

今丁度スマホサイトでハンバーガーメニューをデザインしています。

また最近ではハンバーガーに変わるナビも出てきているみたいなのでまとめておきます。

実際どうなの？

ハンバーガーメニューのデメリットとしてあげられているのが、

・３本線がなにをあらわしているのかそもそもわからない

・タップしてみないと中身がわからないためページ遷移が非効率

メリットととしては、

・少ないスペースでメニュー表示エリアを確保できる

です。

UX的にはあまりよくないといわれていますが、

私はそんなに面倒に感じたことがないのであまりわかりませんでした。

そのサイトに訪れるユーザーはどんなユーザーなのか、

そのサイトに合っているかをみることがたいせるなんだろうなあ・・と。

最近では

「タブ型ナビゲーション」と言うものがきているらしい。

メニューの量が多い場合はつかえないですが、

機能が限られたサイトやアプリでつかわれてきているそう。

Instagramとかはこれにあたりますね。

あとは重要なメニューは表示して、

サブ的なメニューを「もっとみる」などでまとめてしまう方法。

facebookなどがそうですね。

メニュー一つ取ってもいろんな工夫が加えられて出来ているわけです。

サイトデザインは考えることがいっぱいです。

http://14billion-danchi.mods.jp/experience-dictionary/

まずこのサイトを見てください！

採用サイトの参考サイトとして先輩社員から共有されたものです！

見た瞬間、みんなで絶賛しました。

なぜ、そんなにも全員そろっていいと言ったのでしょうか。

アイデアがデザインに落ちている

このサイトは見てわかるように、

伝えたい内容（言葉）と動きが一緒になっています。

普段から「アイデアがデザインに落ちているか？」と

先輩からいわれているのですが、これこそアイデアがデザインに落ちているものだなと。

また、その表現のあとにきちんと説明がなされていて、

思わず隅々まで読みたくなってしまう、そんなサイトです。

デザイン性が高いのももちろん素敵だし、

サイトの動きも色んな動きをしていて飽きないし。

でも一番すてきなのはアイデアがきちんとデザインにおちて、

サイト上で表現されていることだと私は思いました！

こんなデザインができるように、

普段からいろんなものを見て、考えていこうと思います。

1つ目のサイト制作が終わったので振り返りを行いました。

考え方の部分をまとめておきます。

・サイトのテイストを統一する

ーカタチ、フォント、カラーに統一性を持たせる

　自分のサイトを擬音語で表現したらどうなる？

　そのデザイン表現が正しいのかどうか判断するためにテイストは必要

・すべての要素に意味を持たせる

ーレイアウト、余白、色、フォント

　全ての要素がきちんと説明できないとだめ

　※ただし説明できても見た目が悪いのは論外

・なんかいい感じ！からの作り込みが大切

ー全体のレイアウトや要素が決まってからの一つ一つの作り込みが

　サイトのクオリティを上げていく

　↑これめちゃめちゃ大事、本当に大事

　ここに時間かけれる人がいいデザイナーだと感じた

・何もしていない場所をつくらない

ーおいただけは手抜き感が出る

　余白とシンプルは全然違う・・

・コーディングした時にどうなるのか、実現可能なのか考える

ー全てのサイトのレイアウトは基本的なものが大半

　基本的なレイアウトに細かいあしらいを加えて違いを出していく　

・見えない部分の想像力が必要

ーホバーした時はどんな動きになる？

　ブラウザサイズが変わったらどうなる？

　実際につかうものなのでそこの想像力も必要

　デザインを見せる時にそれがあると見栄えも良くなる

・時間がある限り何周もする

ーこれくらいでいいか。で終わらない

　自分がキタ！てなるまで続ける

・捨てる勇気

ー一部でみたらいい感じだけど、

　全体通してみたらなんかなあ・・ってなる表現は、

　気に入ってても捨てる勇気が必要

・コレ微妙なんかな？は微妙

ー微妙かイケテルのどっちかしか無い

　自分がこれでいいのか？と思っているうちはイケテナイ。

デザインをする時に必要な考え方のまとめを今回はしました。

次はもっと深く、細かくなんでこんなデザインになったのか、

振り返って行こうと思います。