CHROMA

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

Design

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

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

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 でパス…

Sketch 練習記 #2

ブログの新規記事投稿ページのデザインを作ってみたり。編集に関する各要素ははてなブログを真似して置き始めたんだけど、途中で要素の数が多すぎて面倒になったので最小限。意味も無くでっかい英字を置いたのはご愛嬌。 Sketch はパス編集と選択の切り替え…

Sketch 練習記

Fireworks CS5.1 ( FW )から Sketch に乗り換えようと奮闘中。今はまだ Sketch 2 を使用中。 FW で出来て Sketch で出来ないことというのも勿論あって、特に色のフィルター関連の機能が Sketch に少ないなと。このへんの機能は FW で重宝してたんだけどな…

Hello Sketch

これまでデザイン作るときは Fireworks 5.1 使ってたんだけど色々困る場面が増えてきたので(書き出しの時とか)、できれば別のアプリケーションに乗り換えたいなーとか考えてた。 Antetype や AFFINIY 、Adobe の他の製品で代用できないものかと考えたけど…

SoundCloud のグリッド表示リスト

少し前に SoundCloud のお気に入りリストの表示形式が変わり、リスト形式の他にグリッド形式での表示ができるようになった。 グリッド形式にすると一つのアイテムに含まれる情報は少なくなってしまうけれど、その分 1つの画面内に含まれるアイテムの数が多く…

利用者って誰のこと

ペルソナやサービスのコンセプトが固まってない状態で「利用者が何をどう見るか、どのように使うか」を根拠に議論しても無駄だと思う。 結局それぞれが想定する利用者・利用方法を言っているだけで、これは「何がオシャレか」を話し合うのと同じくらい不毛な…

線や枠の存在感の調節

デザインをしていると線や枠の存在を弱めたり強めたりすることがあるけど、これを調節する方法はいくつかあるよなーと思った。 トーンや透明度を調節して色を背景に寄せたり、破線にして面積を減らしてみたり。 僕はこういう時よく色を変更する方法を取るけ…

Illustrator で要素を適当に散らす

星空などを作るときなど、ある程度ランダムにデザイン要素を散らしたいときには散布ブラシが便利。 今回は小さな星を適当に散りばめるために、以下のような設定でオリジナルブラシを作った。 注意するところは特に無いけど、ブラシで散らした後に要素の色を…

おさわり Blender

昨日やってた Three.js入門が今朝終わって、今日は Blender を触ってる。 Blender はオープンソースで開発されてる 3次元コンピュータグラフィックスソフト。 日本語でソフトの概要や使い方、チュートリアルを公開しているサイトは多い。 Blender入門(2.6版)…

TOYOTA MIRAI のサイトとロゴに惹かれる

TOYOTA から「MIRAI」という車が発表されたのを GIZMODO の記事を通して知った。 「MIRAI」への一歩は今日はじまった。トヨタ新型FCV(燃料電池自動車)発表会【更新終了】 : ギズモード・ジャパン toyota.jp MIRAI 今すぐに車を買うほどのお金がない僕がこ…

「利用者のために」を自分の感性に置き換えてはいけない

「利用者第一優先でサービスを改善していこう」という言葉はよく耳にする。それに、この言葉そのままではないけど、自分が作ったデザインを人に説明するときにはこの意味合いを込めて話すことが多い。 しかし、ほとんどの場合、それは自分の感性をサービスの…