話題の記事

プログラマがデザインをはじめるとっかかり

2012.12.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

  • 目的に到達するのは得意(各技術を用いて目的に到達する)
  • 絵を描くのがあまり得意でない(クリエイティブという言葉が出てくると抵抗を感じる)

デザインスキルを身につけたいと考えるプログラマのそのとっかかりを考えたいと思います。 高度なデザインではなく、あくまでもとっかかりの話です。 デザインというとアーティスティックな側面がありモヤモヤしている、掴みどころがないという要素がある故に敷居が高そうな印象がありますが、 デザインには答えがある。その答えはロジックにより導かれる、とひとまず考えてみてはいかがでしょうか。 プログラムを書く人は論理的思考力が優れているように思いますが、これをデザインにも適応するとイイかと思います。

論理的に考える

例えば既存のシステムにボタンを配置するときです。

  • ほかのボタンの形状はどうなってる? → 角丸で統一されている → 同じように角丸で描画する
  • 色はどうする? → 背景色を考慮したり他のボタンとの差別化をすると補色のオレンジがよい
  • 大きさは? → 重要度と色との兼ね合い、レイアウト規則の関連性を考慮して決める
  • とか色々(心理学的要因・利用環境の考慮・・・)

このように条件から論理的に絞り込んでボタンを描画することが可能です。 ソース書くよりもロジック考える時間の方が長い、というのと同じです。 また、わからないことはググって調べるのもプログラム作業と同じです。 ベーシックなパラメーターから始めて徐々に幅を広げてけばイイと思います。

ソフトウェアは手段

次はボタンよりもビジュアルデザイン要素が多い「アプリアイコン作成」、という目的に到達するための手段を、これから始める人目線で考えます。

例えばバイオリンの音色で音楽を作曲できるアプリのアイコンを作るとします。

一目でバイオリンのアプリだと思ってもらえるようにアイコンにもバイオリンのデザインを入れたいと考えます(とします) ↓ バイオリンは木目ですので「木目 テクスチャ」とググります。(英語とかにしてみるのもイイです) ↓ バイオリンの形状が描ければよいですが無理なのでググってフリー素材を見つけます(時間があればパスの書き方をググってグラフィックソフトで形状をキアイで描画します)

icon01 ↓ photoshop(グラフィックソフト)を起動して参考サイトを見てどうにかテクスチャを作ります。無理そうならフリー素材をみつけてダウンロードします。またはパターンなどもあります。

texuture ↓ バイオリンの形状に合わせてテクスチャを張り付ける方法がわかりません ↓ 状況に応じて「photoshop マスク」とかでググります ↓ どうにかバイオリンのアイコンは作成できました

icon02

 

明るしたかったら方法を調べたりしてディテールを作っていきます。

icon3

このように、いきなりグラフィックソフトを立ち上げてやみくもに何か始めるよりもやりたいこと、目的ありきで何か作業をすると、とっかかりとしてはモチベーションも保ちやすいかと思います。 実際には非常に苦労や困難を伴い、細かいところを知りたいのに!と思うかもしれませんがそこは調べ方の工夫や慣れに依存してしまうところだと感じます。 Bootstrapとかズルいデザインとか便利なものがありますので、それらをとっかかりとして取り入れるのもよいかと思います。

引き出しが必要

発想自体が湧かないで目的に到達できない場合もあります。 発想を豊かにするためにその引き出しを整理しておくことはやはりイイです。 簡単な方法として、例えば何か自分が好きなもの、イイと思うものがあれば、「なぜそれがスキだと思うか」を論理的に考える習慣を身につけるとイイです。 普段生活していて目についたり耳に入るものすべてに適応できます。 ムッシュかまやつが歌っているように、何かに没頭したり狂ったように凝ることで見えてくるものがあります。 好きな対象の歴史的な成り立ち、構造、それを取り囲む要素との関連性等です。 そうすると何故それが好きなのかが見えてきます。 こういったことは何かをデザインするための引き出しとして役に立ってきます。 また、自分が好きなもの以外でも、同じように何らかのロジックに支えられて世間に受け入れられているものが多いこともわかってきます。 ターゲット層がどうなってるかを分析しておくのもイイです。

至上に触れておくことは尺度を得たり、目を磨くために必要ですので美術館に行ったり映画を見たりするとイイでしょう。

とはいえ、そういう習慣がない、という人のためにいくつか紹介しておきます。 映画館はそれ自体認知度が非常に高いのでちょっと違う毛色のものにします ※都内限定

国立新美術館森美術館

この2こあたりはとりあえず押さえておくとよいと思われます。メジャーです。

 

ワタリウム美術館 コンテンポラリーアート中心です。本や雑貨も売ってます。

 

LOGOS 美術館に行くのが面倒な人は本屋で済ますものイイでしょう。

 

シネマライズ いわゆるミニシアターです。メジャーすぎずマニアックすぎず。

 

バウスシアター 定期的に爆音上映をやってます。爆音と映像のミックス体験したい人は是非。

 

Design rule index―デザイン、新・100の法則(書籍) デザイン原理を学びたい人には良いと思います。

結び

技術自体は極めて重要な要素ですが、それを使ったその先、それがユーザーに何をもたらすかのビジョンを描くことも大切だと思うことがあります。 そういったビジョンをメンバー間で共同で描く場合はデザインやテクノロジーが組み合わさった領域なので、職能をまたいだある程度の相互理解が必要になると思われます。