レスポンシブを前提にしたカンプ作成、ちゃんとできてますか？

変化の激しいWeb業界では、技術的変化やトレンドに合わせて現場でのワークフローも変わり続けています。

数年前まではPhotoshopやFireworksでしっかりとカンプを作りこんでスライスを切って、やっとコーディング…という流れでしたが、これも通用しなくなってきています。

 

今更書くまでもありませんが、今日ではエンドユーザーがWebを閲覧する環境も多様化しています。

そうすると、従来のデバイス毎にがっちりとカンプを作りこんで管理しておくというワークフローは無理が出てくるわけです。

 

スポンサーリンク
 

 

今求められているのは、どのような環境からアクセスしても快適にコンテンツを見ることができるような、スケーラブル（拡張性のある）なレイアウトなのです。

そこで、カンプ作成の段階でもレスポンシブを前提としたワークフローの導入が必須になってきました。

 

とはいえ、具体的にどのような方法で作っていけばいいのか…

そんな疑問を解決してくれる技術書にやっと出会えました！

 

それが今回紹介する、『Webデザインの現場ですぐに役立つ Photoshop仕事術』です。

この本を読めば、レスポンシブが当たり前となった現在で、より効率的に賢く、コーディングにもすぐに反映させられるようなスマートなカンプを作成することができるようになります。

具体的にどんなところが参考になったのかというと、次のようなポイントです。 

 

Photoshopのプラグインは想像以上に便利だった

あなたは、Photoshopのプラグインを活用できていますか？

おそらく、けっこうな割合の方があまり活用していないのではないでしょうか。

 

わたしもつい億劫で使わないでいたのですが、心を入れ替えました！

「フォトショのプラグイン、めっちゃ便利じゃん！」

 

例えば、アイコンフォント。

今だと、FontAwesomeなんかがよく使われていますよね。

 

しかし、使うにしてもカンプの段階ではじめから反映しておきたいですよね。

そんなときには、「FontAwesomePS」というプラグインがおすすめです。

creativedo.co

 

このプラグインを入れれば、なんとPhotoshopのタブから直接カンバスにFontAwesomeのアイコンを挿入することができるんです。

しかも、このプラグインは無料！

 

わたしは今ちょうど仕事であるシステムのフロントのページを設計しているのですが、さっそくこのプラグインを使用しています。

例えば、「アカウント情報」や「ログイン」など、文字の前にFontAwesomeのアイコンがあるだけでとても分かりやすいUIにすることができるのですが、わざわざダウンロードしてくる必要もありません。

カンプ作成の段階で、タブから選択するだけで一発です。

 

このように、『Webデザインの現場ですぐに役立つ Photoshop仕事術』では便利なPhotoshopプラグインをいくつも紹介しているのですが、正直プラグインの部分だけでも十分買う価値がある本だと思います。

 

Bootstrapをベースにしたカンプ作成のフローが学べる

レスポンシブデザインにする場合、Bootstrap等のCSSフレームワークを使うパターンは多いのではないでしょうか。

この本は、Bootstrapをベースにしたカンプ作成のフローを例に沿って学習することができます。

 

• グリッドシステムに基づいたガイドの設定
• 簡単にグリッドを引くための便利プラグイン
• レスポンシブを前提としたファイルの正しい作り方

 

などなど、特にBootstrapを使っているデザイナーやコーダーの方には目から鱗が落ちるようなテクニックをたくさん知ることができます。

 

「スライス」はもう昔の作業

「スライスは過去の作業に」

この言葉は、『Webデザインの現場ですぐに役立つ Photoshop仕事術』の中にある見出しの一文です。

 

先ほど記事の冒頭で、「技術的変化やトレンドに合わせて現場でのワークフローも変わり続けています。」と言いましたが、最近のPhotoshopって本当に便利になってるんです。

 

Web制作のフローって、それなりに要領を掴めばある程度パターン化して効率よくできるのですが、そのワークフローに慣れすぎたために、面倒なことも「当たり前」だと思ってやってしまっていることが沢山あります。

上記のスライスも、今はいちいちスライス切って名前つけて…なんてことしなくても、一気に効率よく書き出せるんです。

 

え？

まだスライスで消耗してるの？

 

 

まとめ

普段はあまり技術書やワークフロー系の本の紹介はしないのですが、今回紹介した本はかなりおすすめだったので記事にさせていただきました。

それにしても、Web制作に特化したPhotoshopの技術書もやっと分かりやすくて良いものが揃ってきましたよね。

 

数年前までは、Photoshopの技術書といえばレタッチやイラストレーションなどグラフィックに特化したものばかりで、Web制作とかUIデザインを行うためのテクニックを解説した本はほとんどありませんでした。

 

『Webデザインの現場ですぐに役立つ Photoshop仕事術』は、既にPhotoshopでWebデザインをしたことがある方におすすめかなと思います。

 

ちなみに、初心者の方は庄崎大祐さんの『プロになるためのWebデザイン入門講座』がめちゃくちゃおすすめです。

この本の通りに３周くらいチュートリアルをこなせば、Photoshopを使ったWebデザインのやり方の基礎がだいたい身につきます。

現役のWebデザイナーには物足りないかもしれませんが、Webデザイン勉強してる学生さんなんかには最高の教本だと思いますね。

 

▼Twitter

ER図の読み方教えてもらったら世界が変わった。WebアプリのUIとかやるなら絶対デザイナーでもDBの設計とか構造について勉強してないと駄目だね。

— tamu (@tamusan100) June 29, 2015

 

▼Facebook

 

▼ask.fm

tamu | ask.fm/tamusan100

Webデザインの勉強方法や、就活のことなど、なんでも質問してください^^