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 のスクリーンは自動選択ツールで消した。色々消した後に、このブログのキャプチャを撮ってスクリーンにはめ込んだ…

ファンシー・ショートケーキ

元写真はぱくたそさんの「四角い苺のショートケーキ」。元が良いとあまりこっちですること無いな... (ホントに)。 写真にはライトリークエフェクト(星雲)と輝度を高めるエフェクトをつけたんだけど、苺の赤みが薄れてきたので最後にカラー調整で赤がもう…

Morning

朝は 10分早く起きるだけでネミー。Pixelmator で写真加工と文字の編集を試してみた。 このアプリケーションを開いて初めに目に飛び込んでくるのは右下に出てるエフェクトの多さかな。Pixlr もそうだったけど、この辺を豊富に揃えた写真編集アプリが増えてき…

バナーの制作工程を分けて考える

仕事でバナーをいくつか作ったので、久しぶりに制作の流れと振り返りみたいなものだけ簡単に書いとく。 全部で 12サイズ、上から順番に作っていった。 テンプレート 250×250 ( px ) 728×90 120×600 類似サイズ展開 200×200 468×60 160×600 300×250 336×280 …

メインビューの役割

タイトルにはメインビューと書いたけど、これはメインビジュアルやメインイメージ、カバーイメージやヒーローイメージとも呼ばれる。呼び方は色々あるけど、大体はサービスの訪問者がまず一番に見る場所のこと。 サービス内でここが果たす役割は、訪問者にと…

写真に文字を載せるデザイン

写真の上に文字を載せる場合、文字を装飾するか、コントラストを落としたり彩度・明度の調整を行って写真を加工するか、文字と写真の間に一枚何かを挟むかの三択。今思いつくのは。 上記の方法はどれも文字の下に敷かれる写真を汚すので、製作中あまりに元の…

デザインの合意を形状・配置と色で分けて取る

これからはデザインの Fix を形状や配置(フォントやサイズ、余白)と色(青・赤・黄... 、明暗)に分けて取っていこうかな。段階的に Fix を行うことでデザインの修正範囲を絞り、直すべきポイントを正確に見極めたいってのが理由。 形状と配置は分けて考え…

先にコンテンツが揃ってるときのデザイン

3日で終わると思ってたとあるサイトのリニューアルデザインが 4日目に突入した。既にコンテンツが用意されているのでデザインも作りやすいと思ったんだけど、コンテンツがあるからこそ考えることが多くて難しく感じる。 情報を整理して、利用者には欲してる…

t の雲隠れ

Yoga Perdana 氏の文字で遊ぶシリーズが好きで自分でも作ってみようと思ったのがキッカケ。まぁ光や影はツールの機能しか使ってないのであまいし、レイヤーも二層しかなくて重なりは透過でごまかしてるし、結果的には到底及ばずといったところか。 一応製作…

欧文フォントの小文字を試し書き

昨日は大文字だったので今日は小文字です。 b, d, p, q は形自体は同じで向きを変えてるだけだったり。あと、大文字を先に作ってたから c, i, j, o, s あたりは縮小してほぼそのまま使えたのが楽だった。 文字の形に関しては、x や y の斜めの線が少し細く、…

欧文フォントの大文字を試し書き

Open Sans を見ながらアルファベットの大文字だけ作ってみた。タイポグラフィーの基礎をまともに学んでないので変なとこだらけだと思う。 文字を枠線だけで表すと K や X の斜めの線が細かったり、M, N, W の折れ曲がってるところの太さが気になる。 サイズ…

ハネをもたせた丸みのあるロゴ

BaPA のロゴがあんまりにも可愛かったので真似してみた。とはいっても少し形が違うし、thlp は完全に想像(あとデザイン的に至らないところもあるだろう)。ただ、似ている部分が多いのでこのまま自分のロゴとして使うのはちょっとな... 。 角の丸みとか、墨…

Sketch 練習記 #10

ブログのデザインを Sketch 2 で作った。Sketch に慣れるために始めた練習記もこれで最後。 可愛さとシンプルさを意識したブログ デザインは、フォントとアイコンで可愛らしさを、色と線を絞ってシンプルさを表そうとした。ヒラメキアイコンがお気に入り。 …

カタカナでお遊び

ちょっとカタカナ文字を作る機会があったから、そこで作ったカタカナを使って遊んだ。画像内の要素の揃えをわざと中途半端になるようにしてみたけど、画像を見たときの気持ち悪さがすごい。人を不安にさせそう。 カタカナ文字は結構惹かれるものが多くて、ア…

Sketch 練習記 #9

グランジ風の背景に文字を乗せるときのデザインでちょっとやってみたいことがあったので作ってみた。背景に敷いてる素材はここから拝借。 こういったとき、これまでは図形や文字に影をつけるくらいの処理しかしてこなかったけど、合わせて背景の素材を少しぼ…

Sketch 練習記 #8

"Film" という文字をごにょごにょ。映画のロゴっぽくしたくたかったのフィルムを模して文字を連続して並べ、中央にスポットライトを設置。 ロゴ文字はちょっとリッチにグラデーションや影の効果をつけてみた。 映画やドラマのロゴって装飾が施されてるものが…

Sketch 練習記 #7

くにゅっとした文字が描きたくなったので作ってみた。写真素材は足成さんから。 Swim の "S" は図形の組み合わせと変形で作ったけど、"wim" はパスで描いた。Sketch 2 でのパスの編集は細々したオプションが揃ってて良いな。ロゴとかは結局 Illustrator 使う…

Sketch 練習記 #6

Sketch 2 でパターン画像をいくつか作ってみた。作る中で Sketch のマスク処理を覚えたけど、Fireworks と違ってマスクで覆うレイヤー(下にくるレイヤー)だけ選択して処理を実行するんだな。結構使い方に迷った。 画像サイズに大小があるのはファイルを分…

Sketch 練習記 #5

2行目の左から 5つ目がお気に入り。 文字の形を崩さずに太い枠線をつけようとしたり、グローをつけるのにテキストレイヤーを 1つ増やす方法しか思いつかないな。この方法使うと後で文章を変更するのが面倒になるからあまり使いたくないんだけど。 枠線の外側…

Sketch 練習記 #4

色は一応抑えながら(微妙に違う)、形、グラデーション、光と影でどこまでパターンが作れるかみたいなことやってみた。 とにかく 18個までは作ると決めてやってみたけど、最後の一列に苦しさが現れてる。 Sketch、テキストにグローとかどうやってつけるんだ…

Sketch 練習記 #3

前からちょっと気になってた麻雀牌、この機会に作ってみた。といっても、マンズやヤオチュウ牌は Unicode の麻雀牌 使ったから思っていたより面倒なところは少なかった。 ソーズとピンズは自分で描いたけど、ソーズの 8 が意外に難しかったな。Sketch でパス…