• はてなブックマークに追加
  • Yahoo!ブックマークに登録
〈色、フォント、レイアウト、買っちゃう?…「ラク」に行こう!〉 ゆーすけべーが伝授!人気Webデザインの作り方
Webデザインを苦手とするプログラマも多いけれど、「覚えたい」という人も多いはず。そんなエンジニアは必見です。Perlギークのゆーすけべーさんに楽で簡単な「コツ」を聞きました。内緒(?)で教えちゃいましょう。
(取材・文/総研スタッフ 高橋マサシ) 作成日:13.12.20
〈色、フォント、レイアウト、買っちゃう?…「ラク」に行こう!〉 ゆーすけべーが伝授!人気Webデザインの作り方
COLOR
 今年11月から「Japan Perl Association」の新理事と、YAPC運営委員会の委員長に就任した、Perlハッカーの和田裕介さん。というより、ゆーすけべーさん。「ボケて」や「君のラジオ」の開発者として知られる和田さんは、実はWebデザインにもこだわりを持つ。
「僕は開発者なので、Webデザインは本職ではありません。ただ、Webを作るときに色やフォントはシビアに見ていますね。とはいえ、基本的に面倒くさがりです(笑)」
 色の設計に便利なツールとして和田さんオススメなのが「ColorSchemer Studio 2」。有償のMac用アプリで、実際に使っているという。
「ひとつの色を指定すると、色相環が表示されるのです。ここから関連する色を選べますし、もちろん明るさや暗さの指定もできます。こうしていくつかの色を決め、CSSでWebサイトに読み込ませています」
 Webサイトを作る際には複数の色を使うものだが、特に個人ブログなどで見かけるのが「読みにくい配色」や「美しくない色使い」。しかし、ベースカラーを決め、理論的に計算された色相環から別の色を選ぶことで、サイト全体に「色の統一感」が出てくる。これが大きなメリットになる。
ColorSchemer Studio 2で表示された色相環
「また、『SCHEME GARALLY』には色のセットがアップロードされています。ここから自分の使いたい色を選べますし、色相環も表示できます。写真を読み込ませると、その写真から色のセットも作ってくれます」
 つまり、ベースカラーの手助けもしてくれる。ひと口に「色を決める」と言っても、実はプロのWebデザイナーでも難しい作業だ。素人ならなおさらだが、こうしたツールを使えばベースカラーと展開する色を簡単に用意できる。
株式会社ワディット 代表取締役/株式会社オモロキ 代表取締役兼最高技術責任者 和田裕介さん
同「SCHEME GARALLY」のカラーセット
FONT
「僕のgithubのページは、特にフォントに気を付けて作りました。一目見ただけでは、プロの方でも種類がわからないと思いますよ」
 使われているのはアップルの「OS X Mavericks」の中の、「游ゴシック体」。一般には見慣れないかもしれないが、こんなところに和田さんのこだわりがある。
 そんな彼が「使える」と思うフォントは、無料の「Google Fonts」。好きなフォントを選んで、CSSとして読み込まることができる。加えてちょっとした知識があれば、もっと便利になる。
和田さんのサイトの「游ゴシック体」
「英字フォントは『Serif』と『Sans Serif』に大きく分かれますが、前者が日本語での明朝体、後者がゴシック体に近いんです。大雑把にいうと、英語の『G』で中央の横棒が外側に出ているのが明朝体、出ていないのがゴシック体という感じですね。そして、日本語のWebサイトはゴシック体のフォントが多いんです」
 つまり、Sans Serifの欧文のほうが、確率的に日本語のサイトにマッチするというわけだ。和田さんはブログにTumblrを使い始めたが、英語圏でのTumblrにはSerifをうまく使っている人がいるという。
「ただ、日本語の文章にSerifの欧文を入れたブログを見ると、変な感じを受けます。個人的にですが、CSSを修正してSans Serifにしたほうがよいかなと思ってしまう」
Serif/Sans Serif
LAYOUT
 Webデザインで和田さんが以前から注目していたのが、CSSフレームワークだ。Webデザイナーには「LESS」や「Sass」を使う人も多いが、和田さんもそのひとり。これらはCSSをコーディングで記述できるライブラリで、変数や関数が使える、入れ子ができるなどの特徴があるCSSのメタ言語。プログラマなら入っていきやすいはずだ。
 和田さんまず、Sassのための記述フレームワークである「Compass」を勧める。
「Compassはいわば再利用可能なツール集。SassとCompassでかなり楽にCSSをコーディングできると思います」
 LESSやSass を基に開発されたのが、汎用性の高いレイアウトを集めたCSSフレームワークだ。和田さんのオススメは「inuit.css」。彼の会社である株式会社ワディットのHP制作にも使われている。
「段組み、フォント、マージンなどをリセットして、自然な表示に変更してくれます。Twitterの『Bootstrap』を使う人が多いようですが、僕はinuit.cssのほうがシンプルでクールだと思います。また、『Font Awesome』は何種類ものアイコンを、画像ではなくWebのフォントで表示できるので便利ですね」
 デザイナーがきっちりとデザインを決めて、エンジニアがそれをCSSでひたすら起こす。こんな業務的な作業なら別だが、特に個人で作る場合は、Webデザインがはっきり決まっていない場合も多い。
「そんなときに便利なツールです。文章や写真などの要素を入れると、なんとなくWebサイトができてしまう。僕も最初はそのようにして作り、カスタマイズをしていきました」
ワディットのHP Font Awesomeのアイコン例
BUY!
 さまざまなツールを使うことで、楽に、簡単に、Webサイトが作れるとわかった。自分にセンスがないと思っているエンジニアでも、色やフォントは「理論武装」で解決し、CSSフレームワークで簡単なプログラムを書けば、まずまずのWebサイトが完成するはず。
 ただ、それでも「めんどくさい」と感じるエンジニアもいるだろう。
「僕も実はそうなんです。だから、Tumblrのブログのデザインは有料のテーマを買って、自分でカスタマイズしました。また、現在の色が気に入らなくなったり、気分転換がしたいなどの理由で、手軽にデザインを変えてもいいと思います」
 デザインのテーマ(テンプレート)を、丸ごと買ってしまう手法だ。和田さんが勧めるひとつが「WooThemes」。手軽にWordPress向けのテーマを購入でき、無料のものもある。CSS、JavaScript、画像、HTMLなどがセットになっており、デモが見られるのもうれしい。
WooThemesのテーマ例
Tumblrのテーマ例
「ボケて」のスマートフォン版画面
 一方、必ずしも楽ができない分野もある。ユーザーの能動的なアクションを前提とした、インタラクションデザインだ。「ボケて」で言えば、投稿写真の下にある、ユーザーのクリックを求めるような部分。目的や用途によって無数のパターンが考えられるため、テンプレート化できないというのが実情だ。
「ただ、スマホの場合はUIやインタラクションにある程度のルールがあり、iPhoneやAndroidにはガイドラインがあります。ですから、スマホのサイトなら、こうしたガイドラインに合わせたほうがよいでしょう」
 PCサイトではむしろ、こうした総合的なデザインがWebデザイナーの知恵の出し所となる。ただ、UIのパーツを提供するようなCSSフレームワークはあるという。
「実装レベルのUIパーツ集に『jQuery UI』があります。よいとは思うのですが、少々重くて、描画に時間がかかるのです。CSSフレームワークを試して、ある程度のWebデザインができたら、次はこうしたトライアルを繰り返してはどうでしょうか。カスタマイズのスキルが身に付きますよ」
WORK
「帳票などの管理画面を作るエンジニアは多いと思います。一般ユーザーが対象でなく、仲間のための開発であっても、やっぱりユーザー体験は向上させたいですよね。ただ、ブログなど自分だけのためのデザインであれば、僕は好きなように作っていいと思う。色味やフォントで人を嫌な気分にさせなければ(笑)」
 その一方で、ビジネスでのWebデザインについては、「サービス的にベストなデザインがあるはず」と語る。単にユーザービリティや使いやすさだけでなく、内部設計やデータ構造などからにじみ出てくるような、サービスに合わせたデザインということだ。例えば「機能美」。
「Webデザインの歴史は、建築、クルマ、アパレル、グッズなどに比べたらはるかに短い。自分のWebサイトなら色、フォント、CSSフレームワークでよくても、仕事となれば話は別。まさに機能美など、他の歴史あるデザインを参考にして、Webデザイナーと話し合ってもいいと思います。エンジニアの腕の見せ所です」
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
あなたを求める企業がある!
まずはリクナビNEXTの「スカウト」でチャンスを掴もう!
スカウトに登録する
高橋マサシ(総研スタッフ)からのメッセージ 高橋マサシ(総研スタッフ)からのメッセージ
「目からウロコ」というのでしょうか、「なるほど!」と思うことばかりの取材でした。自分でブログを作ってみようかと、カッコいいブログが作れるのではないかと、エンジニアでない私が本気でそう思ってしまいました。

このレポートを読んだあなたにオススメします

30人枠に200人が殺到!参加無料で沖縄に2泊3日!

家入一真が仕掛けた“スパルタキャンプ・PHP編”

家入一真氏が主宰する「Liverty」による「スパルタキャンプ【PHP編】2013沖縄」が、2泊3日で開催された。参加…

家入一真が仕掛けた“スパルタキャンプ・PHP編”

TechWave増田真樹、おれのそうび大沢香織、ガラパゴス細羽啓司

Tech女子とHTML5/CSS/JSを駆使してペアプログラミング

Webクリエイターのためのアイデア&スキルコンテスト「Web Creator's Contest “Q the 2nd…

Tech女子とHTML5/CSS/JSを駆使してペアプログラミング

HTML5、CSS、JavaScriptで「夏を涼しくする表現」を作っちゃった

完全再現!きゃんちがWebクリエイターのイロハを学ぶ

Webクリエイターのアイデアやスキルを全世界にアピールできる「Web Creator's Contest…

完全再現!きゃんちがWebクリエイターのイロハを学ぶ

HTML5、KVMなど注目テーマにハイパーエンジニア多数参加

リアル勉強会潜入!究極の技術&エンジニアに遭遇せよ

リアル勉強会潜入!最新技術に遭遇せよエンジニアを対象にした勉強会が活発に開催されるようになって久しいが、最近、勉強会の目的や開催する企業側の意図に変化の兆しが見受け…

リアル勉強会潜入!究極の技術&エンジニアに遭遇せよ

グーグルエンジニア4人が語る「世界を変える私のイノベーション」Vol.1

日本独自のGoogleロゴを描く川島優志のイノベーション

人気企業の採用実態Googleならではのイノベーションとは何か。4人のエンジニアやクリエイターが、主導したプロジェクトを題材に、それぞれの視点で語…

日本独自のGoogleロゴを描く川島優志のイノベーション

広める?深める?…あなたが目指したいのはどっちだ

自分に合った「キャリアアップ」2つの登り方

「キャリアアップしたい」と考えるのは、ビジネスパーソンとして当然のこと。しかし、どんなふうにキャリアアップしたいのか、…

自分に合った「キャリアアップ」2つの登り方

この記事どうだった?

あなたのメッセージがTech総研に載るかも

あなたの評価は?をクリック!(必須)

あなたのご意見お待ちしております

こちらもお答えください!(必須)

歳(半角数字)
(全角6文字まで)
  • RSS配信
  • twitter Tech総研公式アカウント
  • スカウト登録でオファーを待とう!
スマートグリッド、EV/HV、半導体、太陽電池、環境・エネルギー…電気・電子技術者向け特設サイト

PAGE TOP