UI/UXD

ドヤ顔でデザイナーっぽいことを言えるようになる本5選


本稿では、5冊のデザイン書をご紹介します。

5冊の選定基準は、「非デザイナーがデザイナーっぽい事をドヤ顔で語れるようになる」です。
一応どれもデザイン書としては有名で評価の高い本です。

これらを読めば、分からず屋のおじさんを論破したり、ライバルのおじさんに差をつけたり、ちょっと気になってるおじさんに良いところを見せたりできます。

続きを読む


私が愛してやまないUI/UXデザインツール「Adobe Experience Design」


プロトタイピングツールは、超大雑把に言うと以下の2種類に分けることができます。

  • 画面遷移を作るやつ
  • インタラクションを作るやつ

調べてみたところ、上記2種の合いの子みたいな製品もあるようですが、
中途半端なヤツは嫌いなので見なかったことにしました。

私の用途はアプリよりもWebが多く、インタラクションよりも画面構成と遷移を作って
「こんな感じっす」とお披露目することが多いので、前者に属するものをよく使います。
その中でも、以下の2点においてAdobe Experience Design (Adobe XD)を上回るものは無いと思っています。

  • 簡単(初見で使える)
  • 速い(サクサクアウトプットできる)

XDはなぜ簡単なのか

ひとことで言えば「Adobeだから」です。
XDは、Adobe CCに含まれる製品であり、操作性も非常に似通っています。
そのため、Adobe製品に慣れ親しんだデザイナーやフロントエンドエンジニアなら、初見でプロトを作り込んでいくことができます。


デザインモードの画面。Photoshop等と比べるとシンプルだが、痒いところに手が届く感じ。

XDはなぜ速いのか

XDは、UIデザインツールでもあるからです。
PhotoshopやSketchで作ったデザインをエクスポートして、ProttやInVisionで読み込んで…という流れに対して
手間というか、「なんでここシームレスじゃないの?」という違和感を覚えたことはないでしょうか。
私はいつも軽くイラッとしておりました。

XDには「デザイン」と「プロトタイプ」の2つのモードを素早く切り替えることで、2つの作業を同時並行で進められます。
厳密には並行していないのですが、「並行感」が大事なのです。
プレビュー用の URLひとつで他のメンバーに共有もできるため、この点においてもスピーディーです。


プロトタイプモード。初見でも直感的に操作できる。

そして無料!

Adobe IDを持っていれば無料で使えます。
ぜひ一度試してみてください。

クリック!株式会社リンクバルでは一緒に働くエンジニアを募集中です!クリック!


私が愛してやまないWordPressスターターテーマ「Underscores」


WordPressに詳しい人には、今更すぎる内容です

最近WordPressのテーマを1から作る案件が多いのですが、WordPress経験がなさすぎて苦労しております。
とりあえず「スターターテーマ」と呼ばれるものをベースに作成するですが、これも様々なテーマがあって迷いました。
これまでに、以下のテーマが候補に上がりました。

Bones

bones

http://themble.com/bones/

ググってみたところかなり有名とのことで上記サイトにアクセスしましたが、目に飛び込んできた骸骨のイラストが気に入らない為不採用となりました。

Sage

sage

https://roots.io/sage/

こちらもWebサイトを見てみると、gulpのセットアップ済みでデザインもスッカラカンなのは嬉しいですが
Docsを見ると、インストール方法が無駄にSUTAIRISSHUだった為、今回はお見送りとさせていただきました。
私は情弱なので、zipをアップロードしてボタン押すだけじゃないと嫌です。あとBootstrapは使わない予定(多分)なので却下です。

JointsWP

jointswp1

http://jointswp.com/

Sageと同様のイケてる雰囲気を醸し出しておりますが、導入方法はもっとシンプルです。

しかし
jointswp2
今はそういうのはいらないので、そっとブラウザを閉じました。

Underscores

underscores

http://underscores.me/

こちらもかなりメジャーなテーマのようです。レイアウトも何もない真っ白です。
といってもSassのディレクトリ構造はなかなか気が利いており、便利クラスやミックスインも取り揃えています。
そして余計なものは一切入っていないので、かえってやりやすいです。


結局、Underscores + gulp + Bourbon(Neat)でいくことにしました。
結局面倒になって、Bootstrapさんのお世話になる予感がしなくもありませんが…

クリック!株式会社リンクバルでは一緒に働くエンジニアを募集中です!クリック!


私が愛したくても愛せないCSSフレームワーク


CSSフレームワークというのは、Bootstrapとかああいうヤツらのことです。
便利なので導入することは多いのですが、何故かあまり良い思い出がありませ
特に以下の条件に当てはまるものは、ちょっと苦手です。というかぶっちゃけ嫌いです。

いわゆる重量級

BootstrapとかFoundationのようなタイプですね。
デザインもcssの設計も、とにかく余計なお節介が多く融通もきかないと感じます。
そこはかとなく漂うテンプレ臭も気になります。

マテリアルデザイン

Material-UIMaterialize等。
素敵だとは思うけれど、とりあえずこれにしとけばいいだろ的な、
全身ファストファッションで固めてる人みたいな残念さを感じます。

Sassじゃない

フレームワークと名乗りながら、このご時世にLessとかで頑張ってる意味がよくわからないです。

インストール方法が限られている

プロジェクトフォルダにファイル一式放り込めばOKみたいなのでいいんですが
そういうのはあまり多くないのが残念です。

コンポーネントを用意しているが、種類が少ない

こういう中途半端なのが一番嫌です。
よくあるパターンは網羅するか、コンポーネントは一切無しか、どっちかにしてほしいです。


ほとんど全部嫌いじゃねえか!

こんな私でも「素敵やん?」と思うのが
Bourbon, Neat, Bitters, Refillsの、いわゆるthoughtbot四兄弟です。

Bourbon
Sassのmixin集。Compass的なもの
Neat
グリッドだけのフレームワーク。
Bitters
タイポグラフィ、カラー等のベーススタイル。リセット+α的な?
Refills
コンポーネント集。

用途に応じてRefillsまで全部のせにする、BourbonとNeatだけにしておく等融通がききます。
もちろん全部Sass製です。
インストールはgemで行いますが、生成されたファイル一式の取り扱いは割と自由です。
Refillsにはデザインが適用されていますが、Refillsサイト上のソースコードをコピペする形式なのでカスタマイズが楽です。

また四兄弟と書きましたが、実は5人目の兄弟がいます。
その名はEmpties。見た目のスタイリングを取っ払ったRefillsのようなものです。
コンポーネントの種類はRefillsより少ないですが、1から好きなようにデザインできます。


クリック!株式会社リンクバルでは一緒に働くエンジニアを募集中です!クリック!


私が愛してやまない用途不明のFont Awesomeアイコン5選


近頃Font Awesomeを利用することが多いです。
適当なアイコンは無いかとリストを眺めていると、妙に心惹かれるアイコンを見かけます。
でもそういうのに限って、ピクトグラムとしての使い道はなさそうです。
そんな謎アイコンたちの中から、私のお気に入り5つをご紹介という誰得エントリーでございます。

※fa-○○というのは、HTML上でアイコンを指定するためのクラス名です。

fa-fighter-jet(戦闘機)

fa-fighter-jet

使用するシーンは、あまり思い浮かびません。
でも見た目はかっこいいです。そしてcssのクラス名もかっこいい。

fa-space-shuttle(スペースシャトル)

fa-space-shuttle

何か宇宙的なコンテンツに使えるかもしれません。
これと似ているfa-rocket(ロケット)は、より抽象的かつ可愛いデザインで好きなのですが
今回は、より使いづらそうなこちらを選びました。

fa-hand-spock-o(スポックの手)

fa-spock-o

『スタートレック』に出てくる、バルカン星人の挨拶で「長寿と繁栄を」という意味だそうです。
日本では一般的に通用するものではありませんね。
spockというのは登場人物のバルカン星人、ミスタースポックのことです。

fa-bomb(爆弾)

fa-bomb

何かしら使い道がありそうだけど、私はまだその機会に恵まれておりません。
見た目的には一番のお気に入りです。かわいいですね。

fa-lemon-o(レモン)

fa-lemon-o

個人的には、これが一番意味不明です。
なぜレモンなのか。よく見ると少し歪んだ形をしていることが分かります。
サイズが小さすぎると、レモンの絵であることすら分かりづらいです。
色を付ければもっとレモンっぽくなるのでしょうが、-oが付いている通り線画なので「塗り」がありません。


以上になります。
最後になりますが、私の好きなガリガリ君の味は「梨」です。
ありがとうございました!


私が愛してやまないSassの関数5選


Sassの関数には数値や文字列を操作するものもありますが、私が愛してやまないのは専ら色を操作する関数たちです。
どのような関数か、といった解説は今更感が半端ではないため割愛させていただきます。

rgba

CSSでは16進数での色指定ができませんが、Sassではできます。地味に便利です。
また変数での指定もできるため、単に透明度を上げたい時にもよく使います。

Sass
.button {
  background-color: blue;

  &.disabled {
    background-color: rgba(blue, 0.25);
}
CSS
.button {
  background-color: blue;
}

.button.disabled {
  background-color: rgba(0, 0, 255, 0.25);
}

lighten, darken

メインカラーの明度だけ調整したサブカラーを作りたい、といった時に使います。

Sass
.button {
  background-color: blue;

  &:hover {
    background-color: lighten(blue, 20%);
  }
CSS

.button { background-color: blue; } .button:hover { background-color: #6666ff; }

saturate, desaturate

こちらは明度ではなく彩度を変更する関数です。
同系色のバリエーションは明度を変える方が作りやすいですが、こちらも時々使用します。

Sass

.button {
  background-color: blue;

  &.secondary {
    background-color: desaturate(blue, 90%);
  }
CSS
.button {
  background-color: blue;
}

.button.secondary {
  background-color: #73738c;
}

scale-color

上記を含めたあらゆる色の値を操作できます。
全てこの関数に統一してしまうのも良いかもしれません。

Sass
.button {
  border: 1px solid blue;
  background-color: scale-color(blue, $lightness: 80%, $saturation: -50%);
}
CSS
.button {
  border: 1px solid blue;
  background-color: d9d9f2;
}

complement

指定した色の補色を返します。補色のアクセントカラーを入れたい時に便利です。

Sass
.button {
  background-color: blue;
  color: complement(blue);
}
CSS
.button {
  background-color: blue;
  color: yellow;
}

私がSass(CSSプリプロセッサ)を初めて導入した時に最も感動したのは、長期にわたって運用されるWebサイトにおいても、デザインの一貫性が保ちやすくなったことです。

jpgの画像からカラーピッカーで拾ってきたような、非常に近いけれどよく見ると違う、意図的なのか何なのかよく分からない、星の数ほどあるカラーバリエーション。

そういう残念な状況を見なくなったことの喜びを噛み締めていたら、無性にガリガリ君が食べたくなった為これで終わりにします。

ご愛読ありがとうございました。俺たちの戦いはこれからだ!