tikeda's blog

Flower, Plant, Travel, Design, My life stories

効率よく育てやすくデザインする

デザイナーが1人だと効率のよいデザインワークってのが肝で最近意識してる事です。

CSS

言わずとしれてますが、後でページ追加したり、機能追加する時など上の項目をコピーして書き換えただけで、デザイナーじゃなくても項目追加を簡単にできます。

テキスト要素はなるべく画像にしない

特にタイトルとか画像にすると、後でページ追加したり項目を増やすのにデザイナーの作業が入るので。なるべく避けてます。

シンボルイメージはグローバルなイメージで

サービスシンボルは一番の特徴を捉えるだけのシンプルに(ダイアリーだと「日記を書く」、人力だと「質問と回答」)。細かい特徴を含ませると後で追加された特徴や削除された機能がある度に手を加えないといけないので。

シンボル作りはillustratorで粘る

特にサービスのシンボルや利用頻度の高いアイコンはどんな使い方をどんなサイズで利用されるかが分からないので、photohopだと楽でも辛抱してIllustrator(ベクトルデータ)で極力最終形までもっていくと後が楽です。

アイコンは周辺を意識する

仮に「編集アイコンを作って!」って頼まれた時は「新規作成」「削除」「一覧」アイコンも同様に必要になることをこの時点で把握し余力があれば一緒に作っておけば、テイストの統一とかに後で困らないのでいいです。

マクロやカラーパレットを駆使する

詳細な機能説明は省きますが、はてなでは、ダイアリーなどヘッダー色が15色あったり、同じデザインで色違いを作ったりとかする場合が多々あるので、この辺はアクションを作って、マクロで一気に作るようにしたり、別のサービスに展開する場合なんかは、カラーパレットなんかを作っておくとかなり便利だったりします。。

全部photoshopで作んない

さすがに0から作る場合は画面全体を一度photoshopで作りますが、テーブルとかは実際photoshopで作るよりhtmlとCSSのが格段に早いです。状況によってはパーツを作ってコーディングしながらラフもhtmlの方がいい時が結構あります。

今の所、主にはこんな感じです。
納品して終了というタイプのデザインワークには、当てはまらない物もあるかもしれませんが、はてなのようなWEBサービスやアプリケーションなんかをデザインするのは、それとは大きく異なっていて、その後、継続して育てるものなので、サービスに関わる人たちへの(主に自分ですが)内向きなデザイン考慮もアウトプットのしやすさに繋がって重要だったりする気がします。