CHROMA

世の中の "当たり前" を確認する

Design

デザインの解剖

デザインって、まず「基本」がある。すべてのデザインに関わるもの。その上で 2つに分けられる。 基本 【含まれる要素】色彩、形状、レイアウト、余白、フォント、アニメーション 使いやすさを向上させるデザイン 【含まれる要素】設計、インターフェース、…

Sketch でテキストをどう管理するか

結論としては、font-family だけ Shared Style で管理することにした。上のはやろうとしてダメだった例。 タイプフェイスはシンボルで管理するのが大変。色やウエイト、行の方向まで管理するのが大変。Shared Style で管理してみる(同期は使わない形) font…

実例から学ぶ CSSアニメーション

なぜ LT をするか 資料 デモ DIST.15 「アニメーションで差を付ける演出とデザイン」 に参加して、LT をする。 なぜ LT をするか CSS Transition や CSS Animation の使い方がわかっても、実際に活用するイメージが限定的な場面でしか思いつかなかった。 た…

デザイナーとして、何者になりたいか #3

前回の続き。 前回は、社会に対して自分が「個々の進化を助ける」ことに貢献したい、という話をした。 今回は、ここからより身近なフィールドに舞台を移し、考えてみる。 同じ職場で働く人、同じ仕事をしてる人にどんな価値を提供したいか 進化というのを、…

デザイナーとして、何者になりたいか #2

前回の続き。 前回は何も考えず思いついたことを書いた。あれじぁ答えにたどり着きそうにないので、ちょっとやり方考えた。 こんな感じで上から考えていって、「4. そのとき自分は」のところで結論だそうと思う。 社会にどのように貢献したいか 同じ職場で働…

デザイナーとして、何者になりたいか

一年に一回くらいはやってるな、これ。つまりよく自分を見失ってるわけだけど、今年もやる。 考えることが多そうなので、記事はいくつかに分ける。 何を作りたいか 「一目惚れするほど魅力的、使い始めに説明書いらず」、こういったものが作りたい。 たとえ…

「UX JAM & UX Sketch」に行ってきた

PPAP的なノリではじまった「UX JAM & UX Sketch (UX Sketch枠)」、そのレポート。 勉強会の趣旨は以下の通り。 事業開発・新規事業に携わられている方をお招きし、お話を頂く会です。事業開発を進める上での課題(体験設計、顧客開発、社内コミュニケーシ…

流し読み #4

Medium崩壊の内幕:ジャーナリズムを変えようとした理想主義者はいかにして現実に敗れたか エヴァン・ウィリアムズのことはみんな大好き。でも、彼はサービスをマネタイズすることが下手だったから、従業員を解雇するしかなかった。 Medium はこれまで広告で…

ぼかした状態で画像読み込み開始

ページの読み込み時にぼかしかけつつ画像を表示、というようなことをやった。 Blur Load | JSFiddle Medium を見ていると(見てた記事)こういう感じの画像の読み込み表現をしていて、いい感じだと思ってつくった。 ぼかしだけのアニメーション効果(blur-lo…

流し読み #3

UXデザイナーと何が違う?最近話題の新しい職種「UXライター」とは? いいと思った。 「コンバージョンボタンの文言を ABテストしたい」、「サービスの成長に合わせてキャッチコピーの文言を変更したい」、「わかりやすいナビゲーションの文言とは」、アプリ…

流し読み #2

なぜUXデザインは事業で必要とされるのか 今週水曜日に参加する勉強会に備えて、今日はこちらの記事をピックアップ。(UX)デザイナーとは仮説コンセンサスのためのモデル化をする人である、というのはとても納得ができた。しかし、自分の理解が足りないとこ…

流し読み #1

あんまりにブログ書くことがないので、朝読んだ記事のコメントをまとめて書こうと思う。「つづけブログ!」という思いで #1 とつけた。 デザイナーを採用する時には、仕事を分解して何をする人を採りたいか考える必要がある デザイナーの仕事をうまく分類し…

Sketch の行間指定で困ること

Line に 12 って値を明示的にもたせた場合と、そうでない場合でテキストのボックスのとり方が違うこと。 明示的に指定した場合: 指定しない場合: 指定しない場合のほうが正しいボックスのとり方してる。

ボツデザイン埋葬

「数値にまつわるアイコン」をつくってた。ここにあげてるのは全部ボツにしたデザイン。 データを残すには邪魔だけど、そのまま消すにはもったいない、そんなデータ。どうするか悩んだ末、書き出した画像をブログに貼り付けることに。 ブログにボツデザイン…

デザイン良いなー

今日、ちょっと前にブックマークしたサイトがリニューアルしてた。 Wouter de Bres — Product Designer 文章と画像、どっちも栄えるように考えられた良いデザインだなーと思った。画像を無理なく大きく見せれるこのレイアウトが適してるのかな。 少ない色数…

thleap.net v2 & thleap.github.io

thleap.net のリニューアルが完成した。.net 用に新しいリポジトリ作った関係で .github.io のほうが余ったので、そっちは単純な一枚ペラのページに作り変えた。 thleap.net thleap.github.io どっちもお気に入りだ。 色々書いとかないといけないこともある…

5文字フォント "かあちゃん"

昨日の言ってたやつ。もうすぐ母の日も近いということなので、この 5文字にした。頭のなかの「かあちゃん」に思い描くイメージで子供っぽい字になった。 終わってみれば、1時間でアイデアをノートに出して 3時間でパス描くって感じになった。パスが微妙に上…

モノクローム・デザイン

モノクローム・デザインという本を普段手元に置いている。 あんまりこういうコレクション本は持ってないんだけど、この本は色をほとんど使わない分、形や配置に凝ったデザインが多くて面白かったのでしばらく前に買った。 本に載ってたものそのままではない…

見出しと本文の強弱と、セクションの切れ目のつけ方

見出しと本文に差をつけながらセクションの分かれ目をしっかりつける、そんなスタイルを探り探り。 まずは余白と文字サイズのみで強弱をつける。これを基本型として考えてみる。 本文に対して見出しの文字サイズを 2倍にする 見出しと本文の間は見出し文字サ…

飲み込め!!

「サイズや色、こういうルールで決めて ます!だからもう少し大きくとか、色を明るくするとかしたくないです」といっても、モノを見せた時に良くないと言われれば素直に納得しないといけない... かな。色相対比でサイトの色を構成しています、内包されるコン…

毎日ゲーム、今日たまたまデザイン

今日は一日デザインやってた。やらなきゃいけなかったことを忘れてて、期限が近づいてきて思い出したので急いでやった。以下感想。 色の見え方はその色を置く面積で大分変わるから、箱と線とテキストでそれぞれに色を適用して確認するのが良さそう。 色相を …

Illustrator の効果を使いましょうね

「Illustratorで角丸の四角形を作るときの基本的な作法 | DTPサポート情報」みた。 角丸を適用したいときはスタライズ効果を使えば良いみたい。一度効果を適用した後に半径を調整したいときはアピアランスパネルから変更する。 Illustrator の角丸は今までパ…

シンプルに、大胆に

今週頭に thleap.net の新しいロゴができたので、昨日はサイトに掲載するコンテンツの選定とデザインコンセプトを決めた。そして今日はというと、トップページのデザインを作っていた。まだフォントなどを変えたりするだろうけど、大枠はこんな感じで進める。…

線の細いデザイン書体

thleap.net のリニューアルを少しずつ考え、作り始めてる。 デザインは余白を上手く使いながらシンプルにしたいと思ってるんだけど、今回はフォントにも力を注ぎたい。英文フォントはまだ絞りきれてないけど、和文フォントは「徐明」と「明石」の 2つで悩ん…

thleap ロゴの修正

昨日から以下の点を修正。 "a" の下を切ってたのを繋げて文字の形を整えた "t" の右上の交点をかすれないように修正 他に "e" や "h" の右下も変えてみたんだけど、今出してるモノ以上には気に入らなかったので結局元の形に戻した。 今は Web サイトでロゴと…

thleap ロゴ

ネットで使ってる thleap という名前は確か thought + leap の組み合わせだった... はず。なぜ th で切ったかはわからないけど確かそんなだったと思う。単語をただ並べても意味は通じないんだけど、「深く考えて大胆に動け」とか「柔軟(大胆)に思考を変化…

アソビ描き

今日は thleap ロゴのアイデアをノートに描いてた。明日までは今日と同じようなことに時間を使うつもりで、週末か来週頭くらいには Illustrator でパスに起こす。 この制作を始めたきっかけは、thleap.net のロゴをろくに作ってなかったからってのもあるけど…

Type "A"

フォントもくもく会 #2 に参加してきた。4時間くらい手を動かす時間がある中で、僕は半分くらい使ってノートにアルファベットをひたすら描いて、残りの時間で "A" だけパスで起こした。 アルファベットを全てパスに起こすには時間が足りなかったけど、それ以…

髭を剃ってツルピカピンッ

Pixelmator を使って写真から髭を消してみた。左が元写真、右が編集後の写真。(写真粗!) スタンプでヒゲを大雑把に消し、修復ツールで肌になじませるってのを繰り返した。 編集途中、アゴ髭をスタンプで消してる時(修復ツールを使う直前): 最後、アゴや…

PC スクリーンの切り抜き・はめ込み

以前撮ったカフェの写真を編集してみた。まだ Pixelmator 触ってるよ。 ゴミをスタンプツールと修復ツールで削除して、元写真に写っていた PC のスクリーンは自動選択ツールで消した。色々消した後に、このブログのキャプチャを撮ってスクリーンにはめ込んだ…