​ ​
photoshop_tool.gif

インブラウザデザインでスライスを滅ぼす

こんにちは。スカイアークWebデザイナーの山口と申します。

Web業界におけるデザイナーはいろんな出自の方がいらっしゃいます。
グラフィック、アニメーター、レタッチャー、エンジニア、コミュ力お化け・・・
など、その実態はひとくくりにできません。
かく言う私も「何ができる人?」とよく聞かれます。

最近は、デザインした人よりエンジニアの方がUIについて真っ当なロジックを持っていたりします。かようにデザイナーのスキルはバラツキが大きいものです。

Webデザイナーというからにはデザインを作るのが仕事ですが、 静止画のラフデザインだけ良くても、いざ実装して運用してみるとパッとしないことがあります。

これはクライアントと一枚ペラ画像に赤入れ修正のみで進めるためだと思っています。
顧客がデザインに注視しすぎるためにデザインの鮮度が落ちていき、顧客自身も飽きがきてしまったりで中途半端な出来上がりになってしまうのだと思います。

UX思想が至る所で取り入れられ、webデザインの特異性が浸透してきた昨今、 「実装後が見える」ラフデザインの提案は非常に説得力を持ちえます。 プロジェクト進行もスムーズになりますし、デザインのブラッシュアップも容易になって完成度も変わってきます。

そこで、もう マークアップしながらデザインすればいいじゃない志向が5年くらい前からじわじわ盛り上がってまいりました。
近頃レガシーブラウザの切り捨ても進み、Webアプリなら利用ブラウザを絞り込めるので、インブラウザデザインのお膳立てもだいぶ整いました。
使用する画像を最小限に抑えられる、インブラウザデザインで使えそうなテクニックをご紹介します!

CSSフレームワーク

レスポンシブ対応の工数短縮のために、あらかじめ整形されたテンプレートをカスタマイズ。

Bootstrap

おなじみjQueryプラグインを大量に読み込まなくて済む時短セットです。
Bootstrapはそもそも非デザイナー向けに開発されているため、タグに付いたcssをクリアするcssを入れる必要があります。

Bootstrapはコーディングルールを周知徹底しやすく、アサインメンバーが多くなっても助かっています。

Material Design Lite

タッチデバイスでの表現が魅力的なGoogleマテリアルデザインのフレームワークは、タグにcssを持たせず固有のクラス名だけになっているので、Bootstrapよりカスタマイズが楽です。

Bootstrapほど重くないのも魅力的です。

開発ツールの修正をローカルファイルにサクサク反映

こちらのブログで紹介されているように、chrome開発ツールでローカルのCSSファイルを直接修正できます。スカイアークの主力・MT CMSの組み込み前まで、時短に結構貢献してくれます。

アニメーション実装

jQuery UI

こちらもお馴染み直感的な操作感を得るためのアニメーションで、非常にお世話になってます。
小細工が多くなると鬱陶しいので、これで実装できるくらいの範囲が親切設計と感じます。
ごっついプロモーションサイトなどは、After effectsやFlashでモックアップを作ってエンジニアに実装してもらうのがてっとり早そうですね!

画像をsvgやオリジナルフォントに

もうpngからも解放されたい。デバイスの解像度に柔軟に対応でき、svgファイルはアニメーションも作成可能。

IcoMoon

ベクターデータをオリジナルフォントにできるジェネレーター。実用性が高く、通常のWebサイト案件でもアイコンは全部これで作ります。

マークアップできない!

フロントエンドエンジニアにまとわりつく

s.pngのサムネイル画像

横に張り付いて逐一デザインを再現してもらう。

指示側は手を動かさずにUIを考えるだけなので完成度が高くなるはずですが、注文の仕方次第ではエンジニアが豚を見るような視線を送りますので、言い聞かせではなく思いやりとお金が大事かと思います。

マークアップできない!フロントエンドエンジニアもいない!

プロトタイピングツール

マークアップできないデザイナーや、デザインできないディレクターでもちょっとした動きを再現できます。
ナビゲーションやモーダルなど、段階的に見せるデザインにおいて大変活用できると思います。

過去に飲食チェーンの社内SNSアプリの提案があったのですが、営業さんにprottで構築したラフを持ってってもらったら、クライアントの反応はめちゃ良かったそうです!


インブラウザデザインのデメリットですが、一枚ペラ画像のデザインと比べると工数がかかるので、開発フローに工夫が必要です。 しかしパッと見てわかる最強のプレゼンには間違いありません。


弊社ではスライスを滅ぼしたいフロントエンドエンジニア&デザイナー募集キャンペーンを永久実施中。来てね!

このエントリーをはてなブックマークに追加