Orangebomb

どのような理由と思考でこのブログのシンボルマークができたのか

このブログのシンボルマーク

今まで神秘のカーテンによって閉ざされていたデザインの工程を見せること。それは、デザイナーの仕事が重要であることを伝えるためではなく、デザインが抱える大きな課題解決に協力してもらうためにあります。

2016年、デザイナーが実践すること : could に綴られているこの言葉には同意する。デザイナーにありがちな「完成までのプロセスがブラックボックス問題」というのがある。公開されることはまだ多くないので、周りはどうやって作っているのかわからない。わからないからこそ発生する認識のすれ違いがある。

すれ違いを解決するには途中工程を見せることに加え、「思考をさらけ出すこと」が重要だと考える。これは周りとのすれ違いを発生させにくくするだけでなく、本人も「見せる」というアウトプットによりフィードバックを受け、さらなる成長を遂げることができる。

ということで、見せるものの一つとしてこのブログのシンボルマークのメイキングを公開しようと思う。

そもそもなぜシンボルマークか

シンボルの長所と短所

シンボルは「目印」として役に立つ。繰り返し目にすれば、記憶に残る。存在を示すこと・認識することに役立つのだ。そういう理由で「家紋」「紋章」などをはじめ大昔から全世界に「シンボルマーク」というのが存在するのだと思う。

繰り返し目にすれば、記憶に残る。存在を示すこと・認識することに役立つ

これに特化させようとしたのか、それとも知名度的にもはや文字は不要なのか、TwitterFacebookスターバックスなどをはじめ最近のWebサービスでは、シンボルマークだけをサイトタイトル部分に表示することがある。本当にそれでサービスのことが認識されるとしたら、それが一番シンプルだ。逆に言葉にできなくて「青っぽい鳥のマークのアレ」などと伝えるのに不便になるリスクも伴う。ここはやはり知名度に左右されるような気もする。

シンボル単体にした理由

別にこのブログで生計を立てているわけではない。前述のようなリスクがあっても問題なく、すべてが自由だ。やりたいこと・試したいことが自由自在にできる。なので、「シンボルマークだけで伝えるパターン」を試してみたかった、というのが理由だ。 この動機がなければ、ブログ名部分は、タイポグラフィでもよかった。反面、「このブログを覚えてもらう」最適解は図形としても記憶でき言葉としても記憶できる「シンボルマークとロゴタイプ(文字)が合わさったロゴマーク」だということもわかっている。試すことを優先した。

理由と動機の説明の次は、具体的な工程の話に入る。

工程1/3:ブログ名を決める

Orangebomb(オレンジボム)というのがブログ名。そういう名前に至るまでの思考をつらつら書いていく。

  • いつか自分のブログが作りたい。その時のドメインを取っておこう
  • 当時 designbombs.com が好きだった
  • オレンジ色がわりと好き
  • ボムという言葉がなんか好き。マリオでもボム兵は最高。かわいい
  • オレンジボムという言葉を考え、orangebomb.org というドメインをとった。bombsでないのは、こちらは複数ではないから

こういう経緯で、ドメイン名をそのままブログ名にした。

工程2/3:プロトタイプ作成

どのような図形に可能性があるか見るために、具体的な案を作成・検証していく。今回重要視したのは、「サイトレイアウト・色調にしっくりくるか」という部分。 なぜならば、ブログ記事を書いているとき・読んでいるとき、雰囲気でテンションを上げたいからだ。記事を「読むとき」の器となるWebページは、料理の皿のようなものだと思う。スタイリングやレイアウトが読みやすさ・読みにくさに直結し、装飾が雰囲気をコントロールする。「器」が良い体験にも悪い体験にもしてしまうのだ。

プロトタイプ1:ストレートに爆弾

オレンジ色の爆弾。そのまま形にした。微妙…塗りの印象が重いうえに、全部塗ってしまうと爆弾に見えない。

プロトタイプ1

プロトタイプ2:爆弾の種類変更

「ボム」つながりでダイナマイトにしてみた。塗りが重い問題を軽減できたのでは。しかしなんかピンとこない。

プロトタイプ2

  • 線が多すぎる
  • ダイナマイトは縮小表示するには複雑め
  • 複雑で縮小した時に視認性が悪くなると、なんの図形か認識できなくなってしまうため、シンボルとしては望ましくない
  • 平面ではダイナマイトであると伝わりにくい可能性あり

プロトタイプ3:路線変更、頭文字を使う

常套手段である「頭文字」パターン。Orangebomb の頭文字をシンボルにした。わりとよさげ?しかしまだ気に入らない。もうちょっと考えよう。

プロトタイプ3

  • 塗りが重い問題は解決できていない
  • グラデーションつける?

プロトタイプ4:頭文字パターンのマイナーチェンジ

ここでレイアウト側のアップデート。ヘッダと本体を差別化するため、さりげなく白い帯を引くことにした。ロゴについてはベタ塗りが重かったので、まずそれをやめた。

プロトタイプ4

だがしかし課題は多い。

  • この図形の意味がよくわからない
  • 意味があろうとなかろうと、目印としてこのブログと紐づけて記憶してもらえればそれでシンボルの役割は一応は果たせる。しかし、初見でも名前(Orangebomb)との関連性が理解できた方がやはり良い

プロトタイプ5:爆弾と頭文字の混成

まわりまわりめぐりめぐって

プロトタイプ5

改良版のオレンジ色の爆弾に行き着いた。(この段階では果物にも見えるが)

  • ブログのドメインとロゴの示す内容の一致
  • プロトタイプ1と頭文字の「O」を足すことで塗りが重い問題も解決

爆弾の形にしたらどうしてもチープだった問題を、頭文字パターンを経由することで解決した。

今回はこのパターンだったというわけだ。

工程3/3:ブラッシュアップ

プロトタイプ検証で方向性は見えた。ここから磨きの工程に入る。

ブラッシュアップ1

  • グラデーションをつけた
  • 導火線から火花をちらせた
  • 火花がいろいろな形をしているのは、火花は様々な散り方をするから

しかしどこかチープだ。この違和感はなんだ?

謎のチープさと、その原因の探索

これを理解できることでまた一つ成長できる。重要なポイント。見る側が違いに気づくか気づかないかというレベルのわずかな細部の違いが、縁の下の力持ち的な効果を発揮して全体のクオリティを上げる。

違和感の原因を探す。

  • グラデーションの差に問題が?色の選択は?
  • もっと細いほうが映えるのか?
  • 火花の位置はここでいいか
  • 火花はの数はもう少し減らしたほうがポップさが出るのでは
  • 火花小さすぎ?
  • 縮小した時につぶれて消し損ねみたいに見えるサイズでは邪魔なだけである
  • まず色を抜いて図形に絞って検証した方がいいかも?

原因の仮説を用意したので、検証に入る。

検証の末、原因発見

左が編集前、右が編集後。

ブラッシュアップ2

  • 細さの問題が一番大きかった
  • これまでは太すぎてぼってりしていた
  • このシャープさを追加したことで印象が良くなった
  • 導火線の火花の数も三つまでに減らしてシンプル化したら認識しやすくなってアイコンらしさが向上した

ブログに設置したときも現時点ではそこそこ満足できるものになった。

ブログに設置した様子

さらなるブラッシュアップ

まだクオリティの低さを感じる。さらに改良できないか検討する。

  • 火花があるので、導火線まで本体から離れているとごちゃごちゃして見える。隙間を除去した。
  • さらに火花の色は別の色に変更し、「爆弾そのものとは別のもの」ということが認識しやすくなるようにした。

ブラッシュアップ3

完成

そうしてできあがったものがこちら。

完成品

ブラッシュアップ時に違和感と出会い、その原因を探る過程がとても勉強になる事例だった。

Photoshopを使った80年代風のタイトル画像の作り方

君はあの瞬間を音で覚えているか!チキチキ MCUサントラクイズ 最初で最後の劇伴バトル傑作青春編

Photoshopを利用した、昔懐かしい80年代風のテレビタイトル画像を作成する手順を紹介します。

趣味仲間で集まり映画の上映会をしたあとに、ちょっとした出し物をする機会があったためジョーク気味に作成しました。

なので以下が注意内容になります。

  • 80年代「風」なので、正確な再現ではないこと
  • 使用したフォントも本来の用途のものではなく、当時おそらくテレビには利用されていなかったフォントであること
  • 雰囲気「だけ」であること
  • 勝手なイメージから創作している部分があること
  • あくまでジョークであること

この点にだけは気をつけてください。僕自身は85年生まれのため、ほとんど90年代以降の記憶しかありません。なので頭の中で生まれたイメージの側面が強いです。

では、具体的な手順を見ていきましょう。

まずは観察と気づきをメモ

雰囲気を再現するためには、観察が欠かせません。Google検索を使って、それらしい画像を観察していきます。

80年代 テレビ ロゴ で画像検索した結果 80年代 タイトル で画像検索した結果

上記以外にもいろいろな観察を繰り返した結果、以下を気づきとしてメモしました。

  • 実写以外では、アニメ作品中心に背景はベタ塗りであるケースが多い
    • セル画の性質か配信などそれ以外の理由か、最終的に彩度が低い
    • アニメ以外では彩度が高いものもある(高すぎるくらいに)
  • 言い回しにユーモアさがあることが多い?
  • ビックリマークはナナメであることが多い
  • ブラウン管の性質か、画像が滲んでいる・ぼけている

80年代当時、アニメはセル画を使われており、テレビはブラウン管テレビが主流。観察でいろいろと発見。あくまでジョークコンテンツであるため 「観察」にとどめ、歴史的背景や事情の調査は行いませんでした。

観察結果をもとに文言のチョイスとレイアウト

会場の参加者が楽しめるよう、ユーモアさが欲しい。観察して得た80年代の言い回しを参考に、ちょっと盛った文言を用意。

今回のコンテンツが「MCUサントラクイズ」というコンテンツですが、その前後に本来不要である文言を追加して雰囲気を出すことにしました。「君はあの瞬間を音で覚えているか!チキチキ MCUサントラクイズ 最初で最後の劇伴バトル傑作青春編」。このへんはだいぶ僕のイメージから生成された部分ですが、「問いかけ」「傑作」「青春編」という部分が80年代っぽいかな…と。お気に入りなのは、「最初で最後」と言っているのに「青春編」と付いていて辻褄が合っていないところです。ここは80年代関係なく、意味不明さの演出です。ほら、お楽しみコンテンツなので…。

ビックリマークをナナメにし、フォントもそれらしいものを選びました。国鉄(現在のJR)がまだ存在していた時代はちょうど80年代も含まれているため、国鉄方向幕書体を選択。配色も、観察時に集めたサンプルを参考に近い組み合わせを作りました。

一番重要な雰囲気加工

レイアウトした段階では、色が綺麗すぎます。これでは雰囲気が出ません。ここからは雰囲気を出す加工を行っていきます。 まず、すべてのレイヤーを結合し、一枚の画像にします。(バックアップとして必ず未結合のレイヤーデータは残してください。事前に.psdファイルを複製するか、同じファイル上でレイヤーをディレクトリにまとめ、非表示にしておくでもOKです)

ブラウン管の再現:ぼかし小

現在主流の液晶テレビとは異なり、当時のブラウン管テレビでは「滲み」が大きい印象です(これはブラウン管の性質か、ブラウン管に伝わる信号の性質なのか詳しくは未調査です)。ここではその印象に従い、再現していきます。

再現するために、「ぼかし」を使います。メニューの「フィルタ」->「ぼかし」->「ぼかし(ガウス)」を選択し、半径 1.3pixel ほど適用します。

ブラウン管の再現:ぼかし大->ソフトライト->半透過

続けてブラウン管の発光を再現。レイヤーを複製し、オリジナルの上で大きくぼかし、ソフトライトをかけ発光しているように見えるようにし、発光具合の調整のため半透明にします。

複製し、メニューの「フィルタ」->「ぼかし」->「ぼかし(ガウス)」を選択し、半径 6.0pixel ほどのぼかしをかけます。

そのまま、ぼかしたレイヤーに「ソフトライト」を適用します。

不透明度を50%にし半透明にします。

次の工程のために、複製したレイヤーはオリジナルと結合してしまいましょう。

当時の傾向の再現:彩度を大幅に低下させる

最後の仕上げに観察結果にある「彩度の低さ」を再現。

メニューの「イメージ」->「色調補正」->「色相・彩度」を選択し、「彩度」を -40 ほどにします。

さらに2010年代ならではの加工

今現在、正しく当時の再現をできるのは、録画データだけです。しかし、懐かしい動画や画像に関して、多くの人は録画データではなく、ネット上で出会うのではないでしょうか。それらのデータは往々にして、劣化しています。なので、あえて劣化させることで、2010年代に出会う懐かしい画像というふうに再現します。

jpegの質を5%に低下させるのは僕も初めてでした。

メニューの「ファイル」->「書き出し」->「Web用に保存(従来)」を選択し、形式はJPEG、画質を 5 にします。これで画質の劣化が再現できます。あとは「保存」をクリックし、保存しましょう。

これで完成。

まとめ

工程をまとめると、以下のようになります。

  • 観察し、それらしい言い回しを用意する
  • ビックリマークはナナメに
  • 配色についてもよく観察して再現
  • ブラウン管テレビで映し出した状態を再現するためにあえてぼかす
  • 最終的に彩度を落とす
  • さらに、jpegの質を5%に落とし現代で出会う状態にする

イベントのお楽しみコンテンツを作成するときなど、試してみてください。

Photoshopを使って一枚の画像でアナグリフ(3D画像)を作るチュートリアル

Anaglyph Photoshop Tutorial

アナグリフとは「立体写真」のことです。レンズ部分が片方は青・もう片方は赤の透明シートでできているメガネで見ると、立体的に見える例のアレですね。その昔懐かしい立体写真や、今や3D映画でおなじみの立体映像は、1853年にRollmanという人が原理を導いたとされる「アナグリフ方式」、その後「シャッター方式」「偏光方式」など変化してきています。ここではPhotoshopを利用して、一枚の写真を昔懐かしいアナグリフ方式の写真へ加工する手順を紹介します。

応用のために原理を知る

三次元認識の原理のひとつは、二つの視点です。人間の目は、左右別々の位置にあります。当然、片目をつぶって見ると微妙に見える角度が変わります。これが「両眼視差」と呼ばれるものです。三次元認識には他に「遠近法的手がかり」「遮蔽関係」「明瞭さ」「運動視差」などがありますが、アナグリフでは「両眼視差」を利用します。左右の目でそれぞれ微妙にズレた状態を眼を通して網膜に映すことで、脳が立体像として認知します。

眼の前数センチの距離にあるものを見るとブレて見え、離れたものを見るとブレずくっきり見えるように、眼球から距離があればあるほど視差は小さくなります。よって、アナグリフで画像をブラす度合いの調整次第で立体像の見え方が変わります。

現実世界でやっていることを、平面上で再現し脳に「錯覚」を起こさせるというのが仕組みです。

補足

ちゃんとした立体像を作る場合、一枚の画像ではなく微妙にズレた二枚の写真を用意するとより自然に近い立体像を作ることができます。要するに両目で見たその状況のままを二枚の画像で再現するわけです。二枚の画像でアナグリフを作成するのは、また別の機会に…。

操作手順

まずは加工する画像を用意します。

今回の画像加工に使う画像素材

今回はunsplash.comで無料配布されているこの画像を使います。

人物を切り抜き

まずは選択ツールや「選択とマスク」等を利用し、人物を切り抜きます。

背景部分は人物の部分の周囲を消し、背景と同化させる

赤青の3Dメガネで見たとき、背景部分の人物がそのままの状態では、上に重ねる人物と重なって二重に見えてしまいます。それを防止するために、人物の周囲をある程度背景に同化させます。方法はなんでも構いません、僕の場合は「コピースタンプツール」を使いました。

レイヤーを表示

ここからがアナグリフ加工の本番です。用意した背景と人物をどちらも表示させ重ねます。

背景と人物をそれぞれひとつずつ複製する

アナグリフは前述の通り、左右の眼が「ズレ」を認識し立体像として脳が錯覚を起こします。そのために、背景と人物はそれぞれ一つずつ複製し、ずらせるように二つずつになるようにしておきます。

人物レイヤーに効果をかける

まずは人物から加工を行います。人物レイヤーを選択し、レイヤーツール下方にある「fx」というアイコンをクリックし「レイヤー効果」を選択します。

「高度な合成」の項目の「チャンネル」を「R」のみチェックが入っている状態にする

レイヤースタイルパネルが表示されるので、「高度な合成」の項目の「チャンネル」を「R」のみチェックが入っている状態にします。

人物レイヤーのもう片方には別の効果をかける

もう片方の人物レイヤーには別の効果をかけます。 こちらは先ほどと逆に「チャンネル」を「G」と「B」のみチェックが入っている状態にします。

効果をかけるとレイヤーの右側に「効果付き」を示すアイコンが表示される

二つとも効果をかけることができました。レイヤーの右側に「効果付き」を示すアイコンが表示されます。しかしこのままでは画像になんの変化もありません。

人物レイヤーをそれぞれ左右にずらす

効果は人物レイヤーをずらすと現れます。それぞれ右・左にずらしましょう。この人物は背景と比較し、 見る側にとって背景より近くにいる ので、視差は大きいはずです。よって大きめにずらします。

背景も同じように効果を適用しずらす

背景にも同じように効果を適用し、それぞれずらします。ただし人物よりも遠くに存在するものです。よって視差は小さいので、人物よりも少なめにずらします。 人物と背景のこのズレ具合の違いが立体感を引き出します。

画像をトリミング

背景をずらしたことで、両サイドに隙間が生まれます。トリミングしてしまいましょう。

完成図

これで完成です!赤青の3Dメガネを用意し、実際に見てみましょう!

出典・参考文献

以下の文献の情報を参考にしました。

所感

Photoshopのチュートリアル記事でした。いろいろ調べてみたものの、アナグリフのチュートリアルは少ないようだったので作成しました。背景の加工をはじめ、このやり方以外にもっとよりスマートなやり方がある気がします。「アドオンを使う」などではなく、テクニックとしてもっといいやり方をご存知の方はぜひ教えてください。あと原理部分、解釈が誤っている場合もご指摘ください!

(あと背景合成、後ろの壁の調整をミスってることに作った後気付いた)

インクルーシブ本の査読させていただいたら興奮した話

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン

Heydon Pickeringさん(@heydonworks) による著書 Inclusive Design Patterns の日本語化+充実の訳注付き版が インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン として発売されます。

監訳はデザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチの著者であり、コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーションの監訳者である太田良典さん(@bakera)と伊原力也さん(@magi1125)のお二人。

査読のきっかけ

ある日、@magi1125さんがアクセシビリティコミュニティのSlackにて以下のような募集をされていました。

magi1125:この場を借りて、もう1件ご案内させてください。新刊書籍「インクルーシブHTML+CSS&JavaScript」のレビュアーを1-2名募集します。「本日から10月6日ぐらいまでに監訳原稿を読んで、フィードバック頂ける方」「フロントエンド(マークアップ)に業務で取り組んでいるけど、アクセシビリティはこれから学びたいという方(ガチ勢でない方。知らないわけではない、ぐらいのニュアンスでも)」ご興味のある方は @magi1125 までご連絡ください!A11Yガチ勢だと、言ってる意味が補完できてしまって、内容のわかりにくさに気づけないので、「これからやっていきたいんだぜ」勢に読んでいただき、ここ良くわからないっすというのをピュアに挙げて頂けるとありがたいのです

これからアクセシビリティやっていきの人に査読して欲しい、というもの。要するにユーザビリティテストの被験者のようなもの。 そこでまさにアクセシビリティこれからやって行く勢だった僕が立候補をさせていただきました。

不安だったのが僕が「フロントエンドがめちゃくちゃ強いわけじゃない」という部分で、そこについて尋ねたところ「まさしくそういう人もターゲットである」ということだったため安心しました。「ネタバレ歓迎」「ゲラを全部公開するとかでもない限りなんでもあり」とのことだったのでガンガン語ろうと思います。

どんな本?

まず ちょこっと紹介① 刊行によせて/日本語版の刊行によせて より抜粋します。

本書の原著のタイトルは、”Inclusive Design Patterns”で、インクルーシブな「デザインパターン」を意味します。そして副題は “Coding Accessibility Into Web Design” となっており、これを見ていただけばわかるように、アクセシビリティに配慮したWebの実装方法を紹介する内容になっています。既存のWebアクセシビリティの書籍は、WCAG 2.0のガイドラインを紹介するものであったり、「こうするのはよくない」というアンチパターンを紹介するものが主流でした。もちろん、それらを知ることには大きな意味があります。しかし、現場の実装者が実際にどのようなマークアップをし、どのようにJavaScriptを実装するのがよいのか、具体的な実装例まで踏み込んで紹介する書籍はほとんどありませんでした。

まさにこの本は、「現場の実装者が実際にどのようなマークアップをし、どのようにJavaScriptを実装するのがよいのか、具体的な実装例まで踏み込んで紹介する書籍」というわけです。もちろんそれだけではないのですが、まずはタイトルに含まれる「インクルーシブ」という単語についても紹介します。

インクルーシブ(Inclusive)とは?

  • 全てを含んだ、包括的な、包含的な
  • 一部の人の制限しない、開放的な、いろいろな人が参加できる
  • exclusive (排他的) の反対語

この本では「誰でも受け入れる」「特定の人を除外しない」のような意味で利用されています。 インクルーシブの逆の「インクルーシブではない状態」とは、特定の状況に置かれた人には使えない状態のこと、つまり「人を選ぶデザインはインクルーシブではない」と言えます。

僕の以前のエントリー アクセシブルにするならSlideShareを選ぶべき?SlideShareへのアップロード方法 にて、アクセシブルとは?について自分の見解を述べました。

僕は どのような条件であろうと誰しもが同じようにコンテンツにアクセスすることができること という認識をしている。僕にとって「障害者対応」という言葉は本質的ではなく、目が見えなかったとしても、耳が聞こえなかったとしても、テクノロジーを利用すれば健常者と同じようにコンテンツを参照できるのだから、当然そうあるべきである、というもの。(似て非なるもの、というか。やっていることは同じかもしれないが、捉え方の問題)

この本で紹介されている「インクルーシブデザイン」とは、アクセシビリティをも包括的に含み、特定の誰かを排除することなく「ユーザー」と「ユーザーが使うもの」のすべてを視野に入れた総合的なデザインのことです。 この本は「インクルーシブな実装例」が紹介されていました。

「ダメ」ではなく「こうしよう!」

「アレはこういう理由でやってはいけません」と言われ「ではどうすればいいのか…」というような「そこからは放任」というケースは悲惨です。 しかしこの本は表紙にあるように、「ダメ」ではなく「こうしよう!」(そしてどういう理由・根拠で)を学ぶ本と言えます。 ただし、監訳者のひとり@bakeraさんのエントリーによれば

なお、この本で語られている実装方法は、あくまで方法のひとつでしかないことに注意してください。他にもさまざまな方法がありますし、他の方法がダメだというわけではありません。さまざまな方法にはそれぞれ一長一短があり、原著者の主張する実装方法にも長所だけでなく短所があります。この本の実装方法をベースに、短所について議論していただいたり、より良い案を出していただくのも良いでしょう。「この方が良いのでは?」といった感想を持たれた方は、ぜひ共有いただき、議論を深めていただきたいと思います。

「こうしよう!」という本書の提案も あくまで選択肢の一つである ということには注意です。

なにに興奮したの?

4つの漫画:(1)「たしかにデザインはかっこいいね。でも、どうやって乗るの?ドアはどこなの?」「あれ?これって誰が何をどうするためのモノだっけ?」(2)Aさん「ひどい日付選択フィールドだな!なんで普通に日付を入力できないんだ?」Bさん「ひどいテキストフィールドだな!なんで日付を選択できないんだ?」(3)「おもしろい?気に入った?」「それは操作方法がわかってから答えるよ…」(4)「君がデザインしたインターフェイスはすごく評判がわるいよ。みんなうんざりしている」「それは変だな。僕はとても気に入っているのに!」

いくつか理由があります。

  • マークアップ中心の話であるとはいえ、「なぜ」「どうして」というWebに適したデザインの考え方を養える本であったこと
  • デザイナー/開発者などの分類にとらわれず、本当に大事なものはなにか伝えていたこと
  • 文脈で「ん?」となる場面ではかならずと言っていいほど訳注が登場しており、まるで解説者が隣にいて「あーそこはね、こういうわけなのよ」とマンツーマンで教えてくれるようであったこと
  • 刺激的な文面が多かったこと

本来、デザインの仕事とは、熟慮することです。そして、問題に対するベストな解決策を追求することです。それが「見た目の美しさ」という範囲だけでデザインをとらえることで、Webの大半は本来の意図から外れてしまっています。これは、低いアクセシビリティ、貧弱なパフォーマンス、そして全体的な有用性の低下につながります。


あらゆる人間がWebやアプリケーションの潜在ユーザーであり、能力、嗜好、状況のインクルーシビティは最も重要である。異なる人々が集う場では、インクルーシブなインターフェイスこそが常に堅牢であるといえる。


インクルーシブなインターフェイスをデザインすることは、堅牢なデータスキーマをデザインすることと似ています。排他的だったり、時代遅れで廃れたインターフェイスを作ることに比べ、難しかったり複雑だったりするわけではありません。ただ違うだけです。本書では、一般的なWebインターフェイスのパターンについて、インクルーシビティの観点で見ていきます。本書を読めば、慣習を適用したり応用したりする方法をすぐに学ぶことができ、より幅広い人に閲覧してもらったり、閲覧者のフラストレーションを軽減したりできるようになるでしょう。

僕は、自分の作ったものが誰かに「使い物にならない」「わからない」と言われるのが嫌です。あらゆる人に無理なく使えてほしい。そういう僕の願望に「インクルーシブ」という考え方がものすごくフィットしていて、そして「デザイン」の大切なことがたくさん載っていて、デザイナーとして大興奮してしまいました。

本書の掲載内容

実践的なラインナップがサンプルとあわせよりどりみどり。

  • 1: ドキュメント全体
    • DOCTYPE
    • lang属性
    • レスポンシブデザイン
    • フォントサイズ
    • プログレッシブエンハンスメント
    • アセットの管理
    • フォントのサブセット化
    • title要素
    • main要素
    • フレームワーク、プリプロセッサ、タスクランナーについての注意
  • 2: パラグラフ
    • 書体
    • 組版
    • インラインリンク
    • 自動化されたアイコン
    • パラグラフの記述
  • 3: ブログ記事
    • main要素
    • 見出しの構造
    • プログレッシブエンハンスメントと相互運用性
    • Flesch-Kincaid リーダビリティテスト
    • 見出しとリンクテキスト
    • ビデオ
    • フローシステムの確立
  • 4: パターンごとの評価
    • 原則ごとの評価における問題点
    • Custom ElementsとShadow DOM
  • 5: ナビゲーション領域
    • ナビゲーションランドマーク
    • サイト内共通のナビゲーション
    • 目次
  • 6: メニューボタン
    • 外観
    • アイコンの表示方法
    • ラベルづけ
    • 古いブラウザ
    • 操作
    • タッチターゲット
  • 7: インクルーシブ・プロトタイピング
    • ペーパープロトタイピング
    • 紙からコードへ
  • 8: 商品リスト
    • リストの長所
    • カギとなる情報
    • 商品サムネイル
    • 「今すぐ購入」アクション
    • SERP
  • 9: フィルターウィジェット
    • 見た目の例
    • マークアップ
    • CSSによる拡張
    • JavaScriptによる拡張
    • 検索結果をさらに読み込む
    • 表示オプション
    • 動的なコンテンツへの柔軟な対応
  • 10: 登録フォーム
    • コンテキストに応じたフォーム
    • 基本フォーム
    • 必須フィールド
    • パスワードを表示する
    • フォーム検証
    • マイクロコピーライティング
  • 11: テスト駆動マークアップ
    • セレクタのロジック
    • テスト駆動のタブインターフェイス
    • 汎用的ではないがゆえに

発売日

もう目前!11/4発売。ご予約はAmazonで。でももう早い書店では並んでいるかも?(エントリーが遅くなってすみません…)

見本誌をいただきました

見本誌 クレジットに自分の名前が載っていた

ムフフ。書籍に自分の名前が掲載されたのは初めてなので、めちゃくちゃ感激している。株式会社ボーンデジタルの@orange_junoさんをはじめ、みなさん、本当に感謝しています!

(追記)

ブログを公開したのが11/2なのですが、記事のファイルを作成したのが10/13で、修正をし忘れ記事の日付が10/13のままになってしまっておりました。紛らわしくて申し訳n…

多くの人に伝えたい。広めたい。そんなとき、一体どうすればよいのか? 〜インターネットで 可能性をつなげる、ひろげる〜

長崎県の五島列島、福江島。かつて珊瑚漁でさかえた港町にさんごさんという、築80年の古い民家を改装し新設された図書館があります。そのさんごさん主催でおとな小学校 デザインの時間「島でデザインを考えよう」というイベントが行われ、ご縁があってペパボのメンバーで登壇させていただきました。

一生懸命頑張って、素敵なアイデア商品を生み出した!多くの人に伝えたい。広めたい。そんなとき、一体どうすればよいのか?

インターネットで 可能性をつなげる、ひろげる 〜ペパボ福岡デザインチーム〜 from Keita Kawamoto

この発表内容に含まれていた「レンタルサーバー」+「独自ドメイン」で作ったサイトが「拠点」に最適であるという話についてはこちらでも語られています。

さらに多くを知ることができる?

拠点であるサイトによってさらに多くを知ることができる?

というスライドの文章に関して補足を。

  • 公式サイトなら “それの価値をさらに深掘りできる”
  • 公式サイトなら “それを生み出すに至るまでのエピソードを話せる”
  • 公式サイトなら “それに込めた想いを語れる”
  • 公式サイトなら “付加要素を紹介できる”

印刷物やSNSでは伝えきれなかったことを、サイトであれば思う存分伝えることができます。印刷物やSNSでの拡散によって興味を持った人がサイトを訪れ、想いに触れ、その結果ファンになる可能性が上がります。

イベントの様子・その他

地元の方々が集まって、古民家の雰囲気も相まってまるで町内の集会のような雰囲気に。普段のイベントでは体験できないような状況で、興奮しました。

ペパボメンバーは5人で参加しており、発表はそのうち僕を含め3名が行いました。ECに関する発表で@teeeeeeoo、ハンドメイドに関する発表で@shikakunが登壇しました。ペパボ以外では、ギフトで大人気の五島の蒲鉾を作っている浜口水産さんによる「浜口水産のデザインへの取り組み」、五島の鯛で出汁をとったなんにでもあうカレーごと株式会社さんによる「カレーのリデザインについて」、さんごさんが開いているコーヒーショップCORAL COFFEEについて、さんごさんによる「CORAL COFFEEが目指すもの」という発表がありました。

さんごさんの様子 参加者がぞろぞろ集まってきた 談笑する様子 @shikakunの発表の様子 聞き入る参加者 浜口水産の藤田さんの発表の様子 @teeeeeeooの発表の様子

諸事情でスクリーンの用意ができず、Macをイスに置きまるで落語のように発表を行いました。

畳最高

畳が最高に落ち着きます。

海の水が澄んでいる様子

海の水が透明過ぎた。

ここ数年で急激に発展している五島のデザイン界隈に触れられて、とても刺激を受けた旅でした。

迷い彷徨った先で見つけた自分の進むべき道〜キャリアキーノート2017〜

僕が務めるGMOペパボの同僚、@hfmが産んだ「キャリアキーノート」という取り組みがあります。キャリアキーノートとは、

先輩の個人史 (キャリア) を紐解いてもらう中で、その根底に一貫して流れる基本的な考え方 (キーノート) を学ぶ場

というものです。要するに「これまで自分が歩んで来た道のりの過程で生成された自分の根幹部分を、他者に共有する “資料” およびその “発表の場” 」だと僕は認識しています。詳しくは@hfmの記事 キャリアキーノートとはなにか をご覧ください。

今年の春、会社に新卒の7期生たちが入社しました。その後の新卒研修の中で、各職種から1名ずつ発表する方式のキャリアキーノートのパートがあり、僕がデザイナー枠として参加できることになりました。今回はそこで発表した内容を掲載します。なんやかんやで公開し損ねてました。僕が学校を卒業し、就職し、そして今に至るまでどんな道を歩み何を得たのかがわかります。

迷い彷徨った先で見つけた自分の進むべき道〜キャリアキーノート2017〜 from Keita Kawamoto

ヒューマンアカデミー、当時は長崎校が出島にあったんです。今はなくなってしまいましたが…。四つ折りにする紙の話、実際に7期生たちがやってみたところ、2/3がその通り中央よりほんの少し上に点を打っていました。残りの1/3は本当の中央に点を打っていたので、 「人間は本当の中央より ほんの少しだけ上を中央と感じがち」というところでしょうか。みなさんも試してみてくださいね。

資料発表中の様子

社内のことなんてどうでもよくない?のくだりは、「視野が社内だけに留まってどうすんだよ世の中を見ろ、もっと広く見ろ、そして得た学びで社内でぶつかった問題を解決すべきだ」と捉え、ゴニョゴニョ悩む時代は幕を閉じました。最高。誤解を生みそうなワードでしたが、社内のことなんてほっぽり出せ、という意味ではありませんでした。

この資料を作るために過去を振り返って以降時折思い出すのが、恩師の言葉です。

君のポートフォリオは5、6年前の手法だよ

幸いなことに、今僕はデザイナーとして働くことができている。しかし、その実力とは?働けてさえいればいいのか?あの頃とは違う。…本当に?

これから完全に新しく何かをデザインするとする。その結果、もしかしたら今でも5、6年くらい前のレベルのままなのではないか?今の自分は、最大の自分か?見た目だけがデザインではないから、装飾スキルが古いか新しいかとかいうよりも、トレンドだのなんだのとかそんな話でもなく、 「設計」という本当の意味でのデザイン能力は、現時点の自分にとって最大か?

本質的な「デザイン」ということに、新しいも古いもないのかもしれない。ただ、この言葉を思い出すたびに、今の自分が本当の全力なのか、見つめなおします。

僕の視点で見たロリポップ!リブランディング〜開始からリリースまで〜 / Design Casual Talks #2

ロリポップ!レンタルサーバーというホスティングサービスがあります。2001年に開始したサービスで、もう15年以上続いています。僕はそのロリポップ!を提供しているGMOペパボに勤めていて、ロリポのデザイナーをやっています。

15年以上続いてきた老舗サービスを、生まれ変わらせる必要がある。そういう問題に直面し、福岡支社長・マネージャー・エンジニア・デザイナー・カスタマーサービス・インフラエンジニア・ディレクター・特別顧問という関係者全員が集い生まれ変わらせるプロジェクトを始動させました。

結果開始からリリースまで1年ほどかかりました。デザイナーのひとりとして最初から最後まで携わった身として、共同主催でやったデザイン勉強会 Design Casual Talks #2 にて「僕の視点で見たロリポップ!リブランディング」というタイトルで発表しました。

15年以上ずっと大きな変化をすることができなかったサービスをどのように生まれ変わらせたのか?

僕の視点で見たロリポップ!リブランディング〜開始からリリースまで〜 from Keita Kawamoto

イベントの様子

前回よりも多くの方にお越しいただけて、とても楽しい勉強会になりました。 経験不足によりいろいろ失敗しご迷惑をおかけしてしまって申し訳なかったのですが、でもやっぱりデザインの勉強会は最高だなというところが正直な感想です。もっと福岡のデザイン界隈が盛り上がりますように!

入り口の様子 受付の様子 ビール 発表の様子1 発表の様子2

所感

ブランディングを行う際にも、例によっていかに「言語化」することが重要かを再確認しました。 発表時間が15分だったのでこのような省略された内容になりましたが、取り組んだ1年には膨大な学びが他にもまだまだありました。 今後まだお話しできていない部分もアウトプットしていけたらと思います。

リリース後、約束を守るために言語化した軸を中心にプロジェクトを進行中です。まだまだパワーアップしていくので、よければ今後のロリポップ!にご注目ください。

Archives