Webサイトをデザインする時、常に後工程の事を考える。後工程とは、コーディングする部分だったり、Wordpressで作る場合の構成など。それはもちろん必要なことなんだけれど、あまり後のことばかり考えていると、どうも似たようなデザインになってしまう。Webデザインをする人はこのジレンマを抱えている人も多いんじゃないかな。
スマホで見る場合が多いし、軽量で見やすいのがいい。でも、それだけではなー、とデザイナー側の自分が思う。デザインでもハッとするような部分が欲しい。二つの思考があって、どうも混乱してしまう。
最終的には機能を重視しつつ、どこかに見どころのあるデザインを目指すんですが、考えることが多い為100%デザインに脳を使えない感じ。もっと経験を積めば上手く要領が掴めるのかも。とも思うけれど、新しい技術が出来て制作環境が常に変わっていく分野なので、色々考えながらデザインするのは変わらないんだろうな。
Webサイト作成で、初めてbootstrapを使ってみて、便利だった点と使いにくかった点を書きます。
メリット：
●デバイスに応じたグリッドシステム
グリッドシステムは、予め決まったサイズの区切りを使ってレイアウトが出来るシステムです。bootstrapでいうと、画面が最大12分割できます。例えば画面を2分割する場合、3:9のように合計12になるよう計算します。
また、PC画面では3分割、スマホでは分割なし、というような指定が記述を追加していくだけで設定できます。
●レスポンシブ設定が楽
これがbootstrapの一番の利点。PC用に作成したものが、自動的にスマホ対応されます。ナビゲーションバーも、タグを指定するだけでスマホで表示すると折りたたまれた状態になります。
●その他、画面サイズに合わせてくれる
imageやtableなど、特に何も指定しなくても、画面に対して100%の割合になるよう設定されています。幅に合わせてそれぞれ用意する必要がありません。
●装飾が簡単
ボタンやテーブル、フォームの装飾が予め用意されており、簡単な記述で適応できます。
デメリット：
●自動的に色々調節してくれる分、その分制限があり、制限を解除するには反映させたいセレクタを探し、自分で上書きし直す必要があります。
こちらの記事にあるように、セレクタは書き方によって優先順位があり、その知識が必要です。私もこの知識があまりない為CSS効かない…！→セレクタの書き方のせいだった、という事がわりとあります。
※bootstrapをダウンロードする前に、予め変更できる項目もあるようです。こちらの記事参照。
結局、必要なデザイン画面を作成するには、結構ガツガツ手を入れる必要があります。が、作業を効率化できる機能（グリッド・レスポンシブ、ちょっとしたボタンやテーブル等）は便利。上手にいい所だけ、取り入れる感じで使うのがいいかなと思いました。特に、CSSセレクタの辺りをもっと勉強すれば、便利なツールになってくれる気がします。
普通に企業のサイトを作成すると、何十万とお金が掛かる。制作に掛かる分を、正当に計算してもそれくらいになってしまう。スマホ等の対応、先方更新用の（お知らせとか実績とか）ページ対応。最近は基本で必要な機能が多くなっているので、余計にだ。なので、決して制作物に対して「高い」訳ではない。
でもその金額が出せる企業はいいとして、もっと小さい規模の店舗等にとっては、高すぎるというのも分かる。そういう層向けに安いサービスもあると思うけど、自分が作ってもらう側だとしたらただ安いサービスも嫌だ。
制作側も値段以上の手間が掛からず、依頼側も予算に合わせて掛ける部分には掛け、捨てる部分は捨てる。お互いが納得できる、ちょうどいいWebサービスが出来るといいんだけどなと思う。
bootstrapなど、制作を簡易化できるサービスは色々出てきているけど、カスタマイズがしにくかったりでまだ上手く使いこなせてない。私がプログラム（phpなど）の知識があまりないっていうのも大きいんですが。
まぁWebサービスに限らず、製作者と依頼者がもうちょっと繋がりやすくなればいいな、と思う。
最新の機能を使って見栄え良く作られたサイトに目がいきがちだけれど、小さい企業や個人が作るのは予算的に難しい。
そうすると、必要なサイトってなんだろう…と思う。
豪華なサイトでも、ここまでの機能がこのコンテンツにいるのかな…と思う時もある。
Webの世界の流れは早い。スマホが出てきてからは特に。
なので、一度で完璧な予算をたくさん掛けたサイトを作るより、数年して環境が変わったらそれに合わせて変えていけるような身軽なものが理想なのかも。
何が必要で何がいらないのか、よく考える。必要な部分だけ作る。当たり前のことですが、意外と要りそう、というだけで入れてしまうことがある気がする。
次のサイト作成時に導入しようと、現在bootstrap（ブーツトラップ）を勉強中です。
bootstrapとは、Twwiterが提供しているCSSフレームワーク。
Webサイトを一から制作するのではなく、独自の命令を記述することで用意されたCSSとjavascriptが反映されます。
以前から、こういうフレームワークはモックップとして使われていましたが、レスポンシブデザインが主流になって来た今、より必要になってきています。
フレームワークは何度か使おうとしたことはあったのですが、カスタマイズが大幅に必要だったりで、結局ちゃんと使ったことはありませんでした。なのでまずは一度使ってみよう。
新しく勉強するのって始めるまでが億劫だったりするのですが、分かってくると楽しくなってきます。
ちょっとずつの分かった、を積み重ねて徐々に知識が貯まっていく。
スマホやタブレットの対応でWeb制作でやることが増えた分、効率化できる所はして、設計やデザインなど考える部分に時間を掛けるようにしていきたいです。
Webデザインを自分がやって、コーディングを別の人にお願いする場合、ふと気になることがあります。この部分違う方法の方がコーディングしやすいかな…。ここの部分やっかいかも…。と、コーディングする人の作業が気になってしまうのです。
デザインをする場合、作業の効率性とかは一旦忘れてデザイン脳に切り替えて作成します。なので、細かい部分の効率化までこの時点ではあまり意識していません。自分でコーディングをする場合は、コーディングしながら見栄えをチェックしつつ、効率を重視したりここは見た目をこだわって…とか調節しながら作業できるのですが。この調節の部分が、分業する場合はできないのでちょっと心配になることがあるんです。
コーディングをする側は、後作業なので全体が見えますが、デザインをする側は後の作業が見えないので、この見えない部分が気になるのかな。もちろん、どちらも経験抱負なデザイナーだったらこういう心配はないのかもしれませんが。
最近は設計重視の作り方に変わって来ているので、このへんの事情も変わって来ているかもしれませんね。
トータルで見られるディレクションの立場の人がより重要になってきています。
ただディレクター不在の仕事も多いので、最初の設計をする立場のデザイナーが、より最後まで見通した目線を持つことが大事だなぁと。
以前は毎日のように見ていたグノシー。ネット上のニュースやブログ記事から、自分に合ったものを配信してくれるサービスですね。しかし、今年の始めくらいにUIが全面変更され、それからもたまにチェックはしていたのですが、ここ数ヶ月めっきり見なくなりました。
技術系の記事はもちろん、会社でやっていることの分野でもたまに「おっ！」と思う記事があり重宝していたのですが。
私の場合、見なくなった一番の原因は見たくない記事まで表示されるようになったことです。PCの場合ですが、以前はタイル上に自分のリクエストに合った記事だけ表示される仕様でした。
が、現在は3列になり、左にニュースのカテゴリ、真ん中に記事一覧、右側にランキングと話題の記事が表示されるようになっています。この2つが本当にいらない…。しかも内容が下世話というか写真週刊紙みたいだし。それが常に目に入ってくるという。
最初のサービスの立ち上げには、はUIデザイン専門の会社、「Goodpatch」が関わっていています。デザインだけでなくプロデュースやマーケティングまでやっている会社なので、最初はこのGoodpatchの意見もかなり反映されていたのかも。変更時には関わっていないようです。
今のグノシーはより大衆ウケする方向へ行ったと思うのですが、これは当初から考えられていたことなのか、段々方向性が変わっていったのかが気になります。
サービスって時代やユーザーに合わせて変わっていくべきものですが、最も根本の部分が変わらなければデザイン変更も受け入れられると思うんです。
グノシーに代わる、新しいニュースサイトを探そう。
最近、Android 5.0 LollipopのCMを見かけますね。
私はGoogleのタブレット「nexus7」でAndroid 5.0を使っているのですが、4.0までと比べると格段にデザインと操作性がよくなったと思います。フラットデザインからマテリアルデザインに移行、よりユーザーが直観で操作しやすいUIになっています。
メイン画面。アイコンも初期Androidに比べて統一感がありますね。設定画面も驚くほどシンプルに。
時計まわりもシンプルで使いやすい。上のアイコンを押すといちいちかわいらしくピコッと動いてくれるのがかわいい。タイマーは、設定時間を過ぎるとマイナス表示されます。
カレンダーのイラストがかわいくてお気に入り。後は電卓！イコールを押す前に計算結果が既に表示されています。イコールを押した時やクリアを押した時の動きもスムーズなアニメーションが使われてます。こういう細かい動きが洗練されているとテンション上がる！！
メインのスマホはiphoneを使っています。以前はデザインといえばAndroidはiphoneにかなわない、という感じだったのですが。ここへ来て、ちょっと逆転してきたんではないかと感じています。かなり思い切ったデザイン変更がされた感じ。
レスポンシブデザイン、という言葉を聞くようになって数年たつ。PCで見ると横に幅広いサイトを、スマホで見るとシンプルに縦長画面になる仕組みのことです。もう少し詳しく言うと、PC用、スマホ用と分けて作るのではなく、基本は1つのCSSでどちらにも対応するように作ること。
私がレスポンシブデザインをそろそろ勉強しないとな…と思い、本を買って初めてごりごり作ったのは1年前くらいでしょうか。Webデザインって、今まではPCという一定の大きさのキャンバスにデザインしていく、ある意味紙のデザインの延長でもいけるような感覚だったんです。が、レスポンシブという考えが出てきたことによって、「これは今までの感覚がもう使えないぞ…。ﾔﾊﾞｯ。」と危機感を感じたのを覚えています。それくらいまったく新しい感覚の技術でした。
ただその頃読んだ本ではレスポンシブもまだ過渡期。これから方向性が決まっていくかもね、という雰囲気でした。
昨日ふらりと本屋へ行くと、「これからのWebサイト設計の新しい教科書」という本を発見、内容を見て即買い。まだ序盤しか読んでませんが、レスポンシブデザインという考えが方向性が定まり、進化してっている！と結構衝撃でした。前述した1枚の絵を描くようにサイトをデザインする時代はもう終わったようです。
コンテンツファーストという考えが主流になるそうな。コンテンツファーストとは、サイトに載せる情報（コンテンツ）をそれぞれブロックのようにとらえ、各デバイスに合わせてそれらを最適な場所に割ふっていく考え らしい。
Webデザインは昔から絶えず変化をして来ているものですが、スマホ＆タブレットが出てきてからの変化はほんとに激流のように感じます。付いていけるかと思うこともありますが、でもそこがおもしろい。と思える内は大丈夫かな！