見出し画像

デザインラフ、公開します

僕にとって、デザインのプロセスの中でもアナログなラフ描きが欠かせません。手描きに込められた線には能動的な意思があって、それが結果的にデザインに宿ると思うからです。手描きラフに着手した途端に没入して元気さえでてきます。ああしたいこうしたいと、言葉や素材を吟味しながら「体重のせて描く」感じがいいのですよね。

そしてそのラフは、必ずとっておきます。手描きのラフは何回も書き直すので、思考とブラッシュアップの変遷が手に取るようにわかります。それをチームで共有すれば、学びの教材にもなります。

このnoteでは、僕が普段取り組んでいるラフ描きの取り組み方を紹介するとともに、一部のラフを公開したいと思います。


ラフの取り組み方


1. 消さない
アナログは消すのが面倒なのでアイデアをどんどん出すことに集中できます。デジタルはすぐデリートできるので、アイデアの源泉の段階でちまちま編集をしてしまうという落とし穴があります。

2. 時間をかけない
ラフは時間かけずに描きます。粗くていいです。その短時間のなかで、はやめに違和感に気づいたり、頭の中を整理できたりするのです。ゴールが近づくから、結果的にデザインが早くなります。

3. 広いスペースで描く
自分のデスクにスペースがあってもそこでは描かないようにしています。なぜならデスクはノイズが多いから。PC見ちゃうし…。何もない広いデスクに、資料をばらまいてそれらに囲まれ、染まりながら描くのがいいです。

4. 客先や打ち合わせ中にどんどん描く
客先での打ち合わせで、ヒアリング内容を言葉でメモするだけではなく、図や構成などのラフをどんどん描いて相手とコミュニケーションをとっていくことも多いです。想いが目の前で具現化されると、お互いの着想に火がついて、持ち帰って考えるよりずっと前進できてる実感があります。

5. たくさん描く
数を出す是非は置いといて、たくさん描くことで引き出しが多くなることと、シンプルに輪郭を作りあげる力がつきます。

6. 思考を描く
同じ四角を描くにしても、いきなりPCだと「矩形を描く」ことが目的になって、描いた図形が正しいと結論づけてしまいがち。手描きは「思考を描く」に留め、試行錯誤の遊びを残したまま何度でも壊すのに向いています。

7. 伝えたいことを描く
絵は手前にあるものを先に、背景は後から描くことが多いと思いますが、‪webはヘッダー、コンテンツ、フッターと、構造的お作法に強く意識が行くけど、ラフ描きで先に構造(背景)描くと小さくなってしまうので、構造をしっかり意識しながらも、手前にあるもの(伝えたいこと)は意識して描くようにしています。‬


ラフお見せします

恥ずかしながら、これまでの仕事から、いくつかの手描きラフを公開します。公開されているwebサイトと見比べていただけるとよいかと思います。


大信州ブランドサイト

画像4

画像14

最初のころはイラスト or 絵にするというアイデアでした(ほかにもまったく別の切り口のデザインとして写真案や動画案などいろいろありました)。そこから、大信州が持つ美意識を表現するのによりふさわしい「書」のストイックさ・神秘さにシフトしていきました。

画像15

書家さんにはたくさん書いていただきました。この写真はその前段階の打ち合わせの様子。


株式会社タカサ

画像12

画像1

何枚も書きなぐったラフ。下手でいい。丁寧さ不要。

画像2

方向性決まったら丁寧に描きます

画像16

ちなみに描く前にいろいろ考えてます。


BSCインターナショナル

画像13

画像3

画像17

レイアウトの変遷については「デザイン守破離」を参考にどうぞ。


Matsue Group Recruiting

画像8

画像9

長野駅東口のランドマーク的存在ともいえる店舗。その形から着想を得ました。ひとつアイデアが生まれると、その特定の要素をサイト全体通して適用できます。この発見があると嬉しい。なお、この写真ではほぼ見えないのですが、左上のはパンフレットです。両方同時進行で進めていました。


BALENA

画像10

画像11

「くうき感」を大事にする建築設計事務所。くうきを感じさせるあしらいをいろいろ。この感触を得ておいてから、実際のデザイン作業に。


MULTiPLE inc.

画像18

画像19

もともとあったポスターグラフィック(タイポグラフィ)を活用。最初は元のグラフィックをメインビジュアルに入れてみましたが、文字をバラシて全体に散りばめました。
また、各コンテンツのエリアを等分のブロックで分けるところを起点に、あえてはみ出してみよう、というアイデアも手描きならではの展開。


古谷野工務店

画像6

画像7

リブランディングでCIが新しくなり、その存在感を出すためにトップページのロゴの配置を工夫しました。設計会社っぽさにも工務店っぽさのどちらかに寄り過ぎないちょうどよいバランスを目指し、大胆さはありつつもかっこつけすぎないデザインにしています。


その他(フォトディレクション用ラフ)

画像17

こうしたいというイメージが固まっていたり、サイトでの写真の用途が明確なときはなるべくカメラマンに伝わりやすいようにラフ(というより絵コンテですかね)を描く場合も。
シチュエーション、トリミング、角度、登場人物、そして並べたときのコントラスト…と、さまざまな要素を同時進行で考えるので、すごく鍛えられます。


おわりに

経験上、ラフに手ごたえを感じたものは、デザインをそんなにこねくりまわさずともその軸を保ったままFixまで持っていけるパターンが多いということ。冒頭の繰り返しになりますが、自分の意思が乗る感覚が、あるのでしょう。

最終的にどんなアウトプットになるかなと想像しながらデザインするのは楽しいです。ラフ描きに没頭しているときの黙々感のなかから、デザインに昇華させる力を蓄えていきたいと思います。


---

ふだん、仕事を通じて心がけていることや気づいたデザインに関する思考とTipsをTwitterで発信しています。よろしければフォローいただけると嬉しいです。

ハラヒロシ @harahiroshi



この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
スキありがとうございます!
692
デザインスタジオ・エル代表取締役。webチーム「ウルトラエル」ディレクター/デザイナー。著書に『クイズで学ぶデザイン・レイアウトの基本(翔泳社)』など6冊(海外版含め累計16万部)。自社サイト5500ページのコツコツ派。経験に基づくデザインの思考・Tipsを発信します。

こちらでもピックアップされています

デザインの視点・思考
デザインの視点・思考
  • 7本

デザイン仕事を通じて心がけていることや気づいたことなど。デザインに関する思考とTipsを発信しています。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。