CREATOR BLOG

今や懐かしい「ガラケー」から学んだ情報デザイン

2014/04/04
きゃない
  • このエントリーをはてなブックマークに追加

こんにちは。ディレクターのきゃないです。
今回は「ガラケー」から学んだ情報デザインということで、まずは簡単にWEB業界での歩みを紹介させていただきます。

現在はディレクション業務をしていますが、元々はデザイナー兼コーダーです。
といっても数年前はWEBデザインとコーディングはセットでやることがWEBデザイナーという認識だったかと思います。
私もその一人でした。

ガラケーとの出会い

そんなWEBデザイナーとして奮闘していたある日、当時勤めていた制作会社の社長に呼び出され、こう言われました。

「きゃないくん、携帯サイトがキテるからやってよ」
※念のため、ここでいう携帯サイトとはガラケーのことです。

当時、携帯サイト制作需要が拡大し始めていましたが、大したデザイン表現もできないくせに、制限が多く専門知識が必要な携帯サイト制作はWEBデザイナーから敬遠されがちなジャンルでした。
もちろん僕もその一人でしたが、やらないわけにもいかず手探りで制作を始めました。

最大の関門は対応すべき端末を意識しながら、その端末でできる表現範囲を定義して制作することでした。
初期の端末になると少ない容量しか表示できないのでより簡素な表現になります。

ガラケー制作で最も必要だったのは、
『テキストとわずかな装飾でどこまでわかりやすく表現できるか』
でした。

その際に参考になったのが、WEB以外のデザイン関連などでも目にする4つのレイアウトルールでした。

レイアウトのルール

【 近接 】

関連した情報を近くに配置してグルーピングすることです。
近くにあるものは関係があると認識しやすいのでわかりやすくなります。

【 強調 】

重要な箇所がすぐわかるので内容が理解しやすくなります。
強調だらけになるとポイントが絞りきれず混乱してしまうのでちゃんとした優先順位付けも必要になります。
ガラケーは強調の表現方法が記号やカラーでつけることが多かったため、やりすぎると大変な事になります。
そんなカラフルで目がチカチカする見づらいガラケーサイトの記憶ありませんか?笑

【 整列 】

要素の位置を揃えることで、デザイン上の秩序ができます。
左揃え、右揃え、中央揃えなどいくつかの整列の種類がありますが、種類により印象が異なるので用途に応じて使い分けます。
ガラケーでは横幅が極狭なので整列を巧みに使い分ける必要がありました。

【 反復 】

同じ表現を繰り返し使う事により、要素に繋がりを持たせることができます。
反復させる要素を正しく選択することが重要になります。
見出しやリストの表現などの見せ方ですね。

ガラケー廃れる

お客様からもらった原稿を、これら4つのレイアウトルールを参考に、まずはプレーンなテキストで要素を組み上げます。
(この時点でわかりづらかったらいくら装飾してもいいものにはならないことが多かったです)

そしてページの長さや容量を抑えるために、要素をそぎ落としたり別ページに分けます。
更にコントラストを意識しつつカラーを加え、画像を配置して飾り付けていくわけです。
とはいえ、まずはなんといってもベースの組み上げが重要です。

そんなこんなでかなりの数のガラケーサイトを構築しましたが、みなさんご存じのとおりスマートフォンの登場でガラケーは急激に廃れます。。

会社でも制作の件数は減り始め、注力商材から外れました。
私はどうなったかというと、ガラケーの要件定義やお客様説明の機会が多かったため、ディレクターにコンバートされました。

ガラケーは俺の中で生きている!

現在、様々な案件を回すうえで、このガラケー制作の経験は間違いなく生きています。
情報デザインが上達したのはもちろんですが、資料作成や社内スタッフへの指示・情報共有などにもこのガラケーで培った情報整理が生かされていると思います。
資料作成で悩んだ時にも一度テキストエディタに文言を放り込んで、記号を付けたり組み換えたりして整理することもあります。
シンプルにテキストのみで表現をしてみることで、簡単に情報整理できたりします。
そしてテキストで整理できたものは、簡単な装飾だけでも見やすい資料に仕上がります。

自分以外の人に的確に情報を伝えることは意外と難しいものです。
今のWEBの表現手法は多岐に渡りますが、まずは情報整理が大事です。
そのベースがあったうえで、色々な手法で装飾をしていけばより良いものができるのだと思います。

この記事を書いた人

きゃないディレクター

体長:174cm 唐揚げと野菜を好んで食べる。 生態:日々WEB制作業に明け暮れるが、夏は屋外で肉を焼き、冬はスノーボードを持って雪山に出没。 特徴:見た目は若く見えるが実はベテラン。

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive