フロントエンジニアにぜひ読んでもらいたい、グラフィックデザインに関する書籍のご紹介

やっはろー(= ゚ω ゚)ノ カヤックテックブログ2回目の登場、UIよりUXが優れた人間になりたいフロントエンジニアの町田と申します。 前回の「svg / canvas出力ができるbodymovinの紹介」は、好調な出だしで、現在「bodymovin」で検索すると4番目に表示されます。ご覧いただきありがとうございます。

さて、今回は「デザインについて」の記事です。 デザインと聞くと、専門分野じゃないと言って、身構える人が多くいます。 仕事上そのような態度で、デザイナーと接することはマイナスでしかありません。 ですが、何も知らないまま突っ込んでいくと、デザイナーとの泥仕合に発展する可能性もあります。

そのような人がデザイナーの方と対等に話し合えるようにしたい、デザイナーにCSSに基本ぐらいは知っておいてほしいのと同様に、デザイナー側もプログラマーにデザインの基本的なことを知ってほしいんじゃないかと思い、今回テックブログに書かせて頂きました。

書籍紹介の前にデザインの要素について

デザインの本を紹介する前に、デザインという概念はどのような要素に適用させるのか考え、羅列してみます。
・グラフィックデザイン
・webデザイン
・エディトリアルデザイン(タイポグラフィ)
・モーションデザイン(キネティック・タイポグラフィなど)
・タイポグラフィ(カリグラフィーなど)
・UIデザイン(インターフェイスデザイン、インタラクティブデザイン)
・UXデザイン
・その他、照明、ファッション,CGなど(今回はWEB上の表現に限らせて頂きます。 (○´―`)ゞ ポリポリ)

デザインとは具体的な問題を解決するために思考・概念の組み立てを行い、それを様々な媒体に応じて表現することと解される。
Wikipedia:デザイン

と説明されているように、これだけのデザインしなければならない問題を抱えているということです。
例えば、フォントにどのような問題があり、どのような解決方法があるのかみなさん考えて見てください。

・サンセリフ体とセリフ体どちらが読みやすいと思いますか?
・行間が広い場合、文字の大きさは小さいほうがいいですか?大きい方がいいですか?
・行長はどのくらい必要ですか?
・サンセリフ体を使用した場合、カーニングは広いほうがいいですか?

いろいろ問題がありますね。これらを解決するために、タイポグラフィの基本と概念があります。

他の要素も同じです。
オレンジに合う色は何色か?
ロゴデザインするときは、どうやって作るか?
なぜ、そういうレイアウトにしたのか?
同じく、基本と概念があります。

また、このような問題解決もコミュニケーションデザインという概念に包摂されます。
コミュニケーションデザインとは、最も広義に解釈した情報デザインの捉え方です。

デザインはセンスではなく、知識からしぼり出させるものです。 見やすさとはなにか、読みやすさとは何か、色彩とはなにか。デザインってなにか。 これを知ってるだけで、デザインの見方は変わってくると思います。

普段から手を動かし、日々アウトプットとインプットしているデザイナーに、テクニックやある種の個性的な美的感覚で、勝てるわけがありません。 偉そうにデザインのことを語ってる私も、デザイナーの感性を持ってはいません。 ですが、知識ならどうでしょう。理論や概念、合理性でデザイナーと対等に話すことができれば、デザインのレベルをみんなであげることができると思います。

これから紹介する本たちは、きっとあなたのクリエイティブ活動に役立つはずです。
一冊でもいいので、お手にとって読んで見てください。

※カヤックテックブログはアフィリエイトサイトではありません。

GRAPHIC DESIGN 2014

GRAPHIC DESIGN 2014 グラフィックデザイン 2014

GRAPHIC DESIGN 2014 グラフィックデザイン 2014

まずデザインに興味を持ちましょう。 少し前のデザインアーカイブ本ですが、自分が、今まで見たアーカイブ本の中で1番オススメできるものです。 まず、表紙がいい。素敵。YOSHIROTTENさんというかたが担当しています。 中身も、商業デザインというより、アーティスティック寄りなのもいい。 アーカイブ本といえば、MdNやJAGDAの発行のものを持ってる方がいいですが、 若干、内輪な空気があるので、個人的にMdNやJAGDAのアーカイブ本は、あまり買わないようにしています。 本ではなく、behanceやPinterestを見るのもいいでしょう。

デザインのあれこれ 100 Keywords of Design – JAGDA REPORT

デザインのあれこれ 100 Keywords of Design: JAGDA REPORT (JAGDA REPORT Vol. 191)

デザインのあれこれ 100 Keywords of Design: JAGDA REPORT (JAGDA REPORT Vol. 191)

  • 作者: 公益社団法人日本グラフィックデザイナー協会
  • 出版社/メーカー: 日本グラフィックデザイナー協会
  • 発売日: 2017/07/06
  • メディア: 大型本
  • この商品を含むブログを見る
JAGDA会員(日本グラフィックデザイナー協会)が意見や図も交えて解説するデザイン事典 現代のグラフィックデザインにおける重要な用語約100項目を紹介している本です。 大日本タイポ組合が書いた「模倣」の章は面白いです。

Design Rule Index デザイン、新・25+100の法則

Design Rule Index[第2版]― デザイン、新・25+100の法則

Design Rule Index[第2版]― デザイン、新・25+100の法則

UI, UX, IA(情報アーキテクチャ) なんてことの前に、 基本として知っておくことが記載されています。 カテドラル効果、擬人化形状、3分の1法則など、面白い内容が盛り沢山です。 この本さえ読んでいれば、デザイナーとの話し合いで泥仕合にならないかも?しれないです。 この本、シリーズ化しており、150の法則とか、小型本にしたやつとかでています。

Detail In Typography

ディテール・イン・タイポグラフィ 読みやすい欧文組版のための基礎知識と考え方

ディテール・イン・タイポグラフィ 読みやすい欧文組版のための基礎知識と考え方

タイポグラフィの入門書です。 欧文の本文組に対してのみですが、サッカードやカーニング(特にA,T,V,W,Y)、 1行あたり何文字が適正なのかなど、専門用語を交えて説明してあります。 「読みやすい」とはどういうことなのかを知ることできます。

Typographic Systems

Typographic Systems―美しい文字レイアウト、8つのシステム

Typographic Systems―美しい文字レイアウト、8つのシステム

こちらの本はタイポグラフィの応用書的な立ち位置です。 かなり奇抜な、文字組みや、レイアウトについて解説しています。 文字周りの表現レベルを上げたいデザイナーやUIエンジニアにオススメです。

100sビジュアルアイデア:カラー・コンビネーション

100sビジュアルアイデア:カラー・コンビネーション

100sビジュアルアイデア:カラー・コンビネーション

前半は用語や色組の紹介、後半はより実践的な内容となっています。 サンプルを踏まえてしっかり解説してくれます。 この本を読んだあと、企業のロゴやポスターなどの色使いを意識して見てみましょう。 ルミネのポスターは、カラフルで、女性的な色使いが多かったり、 ユニクロの赤い色は、なぜあの赤い色なのか調べてみるのも面白いです。

UI GRAPHICS ―世界の成功事例から学ぶ、スマホ以降のインターフェイスデザイン

UI GRAPHICS ―世界の成功事例から学ぶ、スマホ以降のインターフェイスデザイン

UI GRAPHICS ―世界の成功事例から学ぶ、スマホ以降のインターフェイスデザイン

  • 作者: 水野勝仁,深津貴之,渡邊恵太,菅俊一,緒方壽人,iA,鹿野護,森田考陽,庄野祐輔,塚田有那
  • 出版社/メーカー: ビー・エヌ・エヌ新社
  • 発売日: 2015/12/17
  • メディア: 単行本
  • この商品を含むブログ (2件) を見る
文章を書いてるのは、有名なクリエイターばかりです。 フラットデザイン以降のスマホUIデザインについて、事例を紹介しながら解説している本です。 ある程度基礎知識があった方が理解度が深まる本です。

デザインのデザイン

デザインのデザイン

デザインのデザイン

原研哉さんという、日本デザインセンターの代表取締、無印良品や、松屋銀座のディレクションをなさっている方が書いた書籍です。 この書籍は、デザインという概念が生まれた時代から現代のデザインへの変化をわかりやすく説明したデザインの本です。 こういったデザインの歴史をデザイン史といい、美大や芸大のデザイン学科では必須科目となっています。(だいたい、みんな講義中寝てますが…) 「デザインとは何か」という疑問にたいして、広く浅く解決してくれるのではないかと思います。 深く知りたい方は、美大、芸大の講義を聴講したり、めっちゃ分厚い本を読んでみてください。 書籍の中盤から、原研哉さんの携わったプロジェクトのことを書いており、デザイナーの考え、考え方に触れる事ができます。 昨今のクリエティブを痛烈にディスる言葉の数々に驚くでしょう。

・現在のデザインはテクノロジーがもたらす「新奇な果実」を社会にプレゼンテーションする役割を担わされ、「今日あるものを明日古く見せる」ことに力を発揮してしまっている。

・形や素材で驚かすのではなく、平凡に見える生活の隙間からしなやかで驚くべき発送を次々に取り出す独創性こそデザインである。

おまけ

ここから先は個人的に好きなものを紹介します。

ggg Books

デザイン業界を知るとスキなデザイナーが1人や2人できます。 亀倉雄策や田中一光を好きになるひとは多いと思います。 そんなデザイン開拓者の神様たちに、お布施を差し出すのもいいと思います。 ちなみに僕は、ソール・バスが好きです。

typographics ti:

日本タイポグラフィが発行してるめっちゃ薄い本です。 国内外のデザイン事情や紙、文字をテーマにした冊子です。 僕は大学生時代によく買ってました。

PARTNER フリーペーパー

全国の美大で配布されているフリーペーパーです。 企画、発行を全国の学生やっています。運営は株式会社モーフィングがしています。 僕は大学生時代に、DTPデザイナーとして所属していました。 ほかにもデザイン完成のフリーペーパーはあるので探して見てください。

Adobe Book 2016「CREATOR'S HINTS 26悩める美大生におくるクリエイター26人のつくるヒント」

Adobeが発行したフリーペーパーです。 全国の美術系の大学、専門学校で配布され、瞬く間に捌けたらしいです。 ちなみに僕このフリーペーパー持ってます。

Magic Visualizer

デザインと言うより、写真、映像向けの本です。 主にカラコレのはなしが中心となっています。 この本、実はコミケに出されていた本です。 コミケと聞くとえっちぃ本だと思う人が多いですが、そんな要素は一切ありません。かなり真面目です。

雑誌のデザイン特集

たまに、PENやBRUTUSなどでデザイン特集が組まれることがあります。 あとは、本の装丁デザイン特集や、デザイン事務所特集などもあります。

蔦屋書店

値段が高いと思ったらまず、蔦屋書店で立ち読みするのもありです。 蔦屋書店のデザインコーナーは充実度がかなり高い傾向があります。 モード学園コクーンタワーの本屋くらい充実してるかもしれないです(言い過ぎかも?) 気に入った本があったら買ってみましょう。

カヤックでは、デザインもなんとなくできちゃうエンジニアを募集しています!

動的コンテンツを画像化できるJSライブラリ "html2canvas" を使おう

こんにちは、HTMLファイ部新卒の石崎です。
今回は、Webページを画像化できるJavaScriptライブラリ、html2canvas について紹介します。 html2canvasを上手に活用することで、Webサイト側で表示ページのキャプチャを用意して処理したり、ユーザに提供したり出来るため、作れるWebサービスの幅がきっと広がります。

スクリーンショットを撮る

html2canvasを使うとWebページのキャプチャを作れますが、そもそもスクリーンショットを得る方法は他にいくつもあります。

Webページの見えている部分のキャプチャをユーザが撮る

  • Mac command + shift + 4 + space
  • Windows Alt + PrintScreen

このコマンドで、Webページのウィンドウに表示されている部分のキャプチャを撮ることができます。

スマートフォンであれば、端末の電源ボタンと音量ダウンボタンを同時に押すことで同様のことができますね。 もはや言うまでもないレベルかもしれません。

Webページ全体のキャプチャをユーザが撮る

縦に長いことが多いページ全体のキャプチャを撮る方法もいくつかあります。 手っ取り早いのはブラウザの拡張機能やアドオンを利用する方法です。

なかでも、 FireShotBlipshot は利用者が多く、使い勝手もよいです。

FireShot

Blipshot

拡張機能を使用せずとも、Google ChromeであればDeveloper Toolsから、ページ全体のキャプチャを撮ることができます。 スマートフォンでページ全体のキャプチャを撮影できるアプリも、Android, iOSともにあるようです。

Webページ(全体)のキャプチャを自動的に出力する

上記までの方法で、ユーザがWebページのキャプチャを撮ることはできるのですが、例えば以下のようなことをしたい場合があります。

  • ユーザのアクションによって生成された動的ページを画像化して、さらにその画像を使って何か処理をしたい
  • 現在表示されているWebページをユーザが気軽に(1クリックで)保存できるような機能をつけたい

このような、Webサイト側でページのキャプチャを用意してあげたいときに使えるのが、html2canvasというライブラリです。

html2canvasとは

前置きが長くなりましたが、html2canvasは、WebページをレンダリングしてCanvasエレメント上に描画することで、画像化してくれるJSライブラリです。 Niklas von Hertzen氏によって開発されたもので、ライセンスはMITとなっています。

html2canvas公式サイト

html2canvasの公式サイトには、ドキュメントや使用方法が載っています。

html2canvas(element, {
    onrendered: function(canvas) {
        canvas.toDataURL(); // base64形式で描画内容を出力する
    }
});

第1引数であるelementには、画像化したいDOM要素を入れます。複数指定することはできないようです。 第2引数には、オブジェクトの形式でオプションを設定します。なかでも、onrenderedはレンダリング処理後のコールバック関数を指定できるので、必須オプションです。

レンダリング処理は非同期なので、複数の要素をそれぞれ画像化したい場合は、ループ処理とPromiseを組み合わせると良いでしょう。

実際の利用例

html2canvasは、画像化が必要であり、かつユーザ入力によってコンテンツが動的に変化するようなWebページに相性が良いです。 最近のカヤックでの案件でhtml2canvasを利用したので、2つを例にしてみたいと思います。

社内メルマガ

メルマガはHTMLを使うことで表現の幅が広がりますが、毎月送信するメルマガの内容を変更するために、エンジニアが載せる情報をもらって更新する作業を行うのは面倒です。 そこで、HTML5のcontentEditable属性・FileReaderAPIを使って、コードに馴染みがない社員でもWeb上で簡単にHTMLメールを作成・編集できる"メルマガメーカー"を作成しました。 (こちらは社内用メルマガとなるので、出来たサイトをお見せすることはできません…)

一般的なメールマガジンではbackground-imageプロパティを使用できず、また内容差し替えがあるということでコンテンツ量も可変となる等の事情がありました。 そこで、編集後のページが十数枚の画像化した別ページを出力するようにし、あとはコピー&ペーストをするだけでメルマガを送れるようになりました。

両家のレシピ

https://ryoke-reci.pe/

両家のレシピは、自分とパートナーの育った味を、1冊の幸せのレシピ本としてプレゼントできるサービスです。

このサービスでは、利用者が入力したデータを元に、実際に送られるレシピ本の各ページ・プレビューに使われる画像をhtml2canvasを用いて自動生成しています。その結果情報入力から本発送までにかかる時間が大幅に削減され、また利用者はどんな本が出来るのかその場で確認できるようになりました。

両家のレシピ

使用するときに注意したいところ

このように、ユーザ自身がキャプチャしなくてもページのキャプチャを撮れる便利なツールですが、使用する上で気をつけておきたいことがいくつかあります。

実際にはスクリーンショットを撮っているわけではない

html2canvasは、WebページのDOMやCSSを読み込み、その結果を元に解釈した結果をCanvasエレメント上に描画するライブラリです。 すなわち、実際にスクリーンショットを撮っているわけではなく、挙動としてはレンダリングエンジンに近いです。 (CSSの解釈はなんと1つ1つ実装されているので、作者は本当にすごいと思います)

このため、一部の新しいCSSプロパティの解釈が出来なかったり、一般的なブラウザとは別の表示がされてしまう場合があります。 導入する際は、期待通りの画像が生成されているか逐一確かめながら進めるのが良いでしょう。

先の両家のレシピでは、文章を縦書きする際に用いるプロパティwriting-modeが正しく動作せず、1文字ずつ決まった位置に配置して、文字によってはtransform: rotate()/translate();をかけるようにしていました。

外部サイトの画像利用について

セキュリティ上の理由から、Canvas APIは同一生成元ポリシーの制約を受けます。

このため、別オリジン(スキームやホストが異なる場合も別オリジンとなります)の画像を読み込んだ場合はCanvasが汚染されてしまい、描画内容を出力するtoBlob()toDataURL()などの関数を実行できません。 これに対応するためには、サーバ側でAccess-Control-Allow-Originなどのレスポンスヘッダを付与して、CORS(Cross-Origin Resource Sharing)を行う必要があります。

html2canvasで別オリジンの画像を含むページをそのまま出力したい場合は、CORSを行った上で、html2canvasのオプションであるproxyuseCORSをそれぞれ設定しましょう。

html2canvas(element, {
    proxy: true,
    useCORS: true,
    onrendered: function(canvas) {
        canvas.toDataURL();
    }
});

Canvas描画領域制限

Canvasを通常利用する場合には意識すらしないことですが、Canvasには1ページ辺りに描画できる最大領域と、横幅縦幅それぞれの上限がブラウザごとに設定されています。

  • IE11:ページ当たりのCanvas描画領域の横幅と縦幅がそれぞれ8192pxまで
  • iOS Safari:横幅 * 縦幅 の値が16,777,216pxまで(正方形の場合は4096px * 4096px)
  • その他主要ブラウザ(Google Chrome, Firefox, Mac Safari, IE Edge, Android Chrome等)は上記制限よりも緩いため、基本的には考慮不要

ページ内で大量の画像を生成しようとした場合、この制限に引っかかってしまう可能性があるので、注意する必要があります。 どうしても1ページ内でこの制限を突破したいという場合は、画像を生成させるための子ファイルをいくつか作って、親要素からiframeを使用して読み込むことで対応可能です。

Retinaディスプレイ対応

html2canvasのデフォルト設定では、生成された画像をRetinaディスプレイで見たときに、画質が荒くなってしまいます。 公式対応は現状されていないのですが、なんと有志の手によってRetina対応が可能となりました。 https://github.com/niklasvh/html2canvas/pull/1087

ファイルを一部書き換える手間は生じますが、その後はdpi, scaleオプションを設定することで、生成された画像を綺麗に表示することが可能となります。 ただし、サイズや画質を上げると、その分レンダリング処理に時間がかかり、また上記の描画領域制限に引っかかる可能性があるので、注意が必要です。

画像生成をさせるボタン等の位置について

ボタンのクリックなどページ内でのユーザアクションによってhtml2canvasを走らせる場合は、ユーザアクションさせる要素と、画像化したい要素の位置関係に注意する必要があります。 レンダリング過程での不具合があるのか、ブラウザで見えている画面より描画したい要素が上側にあると、生成された画像が見切れてしまうようです。

このため、ユーザアクションさせるボタンは、画像化したい要素より上に置くのが無難です。

まとめ

注意するべき点はいくつかありますが、html2canvasは非常に有用性の高いJSライブラリです。 コンテンツが動的に変化して画像化が必要なWebサービスを作る際は、活用してみてはいかがでしょうか!

カヤックでは、通年でフロントエンドエンジニアを募集しています。 応募はこちらからどうぞ!

【新卒採用】 https://www.kayac.com/recruit/fresh

【中途採用】 https://www.kayac.com/recruit/career

【インターン】 https://www.kayac.com/recruit/intern