Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

SoundCloud のグリッド表示リスト

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

利用者って誰のこと

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

線や枠の存在感の調節

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

Illustrator で要素を適当に散らす

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

おさわり Blender

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

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

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

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

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

家の部位アイコンできました

一昨日作ってると書いた家の部位に関するアイコンができた。 家の部位アイコン | JAYPEG 以前書いたとおり、このアイコンはテキストと並べて使われることを想定して作った。そのため... というわけではないけど、洋室と和室などはアイコンだけでは意味が読み…

家の部位アイコンを製作中

家の部位に関するアイコンを作ってる。 ちなみに上のアイコンは左からキッチン、リビング、ベランダ。全部で 20個近く作っているけど、まだ全部は完成しそうにないので今はこれだけ。 今回は制作に取り掛かる前に 1つだけルールを決めた。 それは、作ったア…

Yosemite の色とアイコンの見た目

Yosemite にアップデートしてからどのくらい経ったんだろう。二週間くらいか。 使っていて見た目が気になる箇所が 2つある。 まず、色の彩度が高めに設定してあるためか、 Dock に出てるゴミ箱アイコンの白や、Finder のフォルダの青がグッと目に飛び込んで…

thleap.net できました

作品集がでけたよ。 thleap.net thleap.net ver.1 - thleap.net このサイトでは Web に散らばってる @thleap のデザイン、イラスト、コードをまとめてる。まだサイト内で作品の一覧や詳細を見れるページも作れていないので、ポートフォリオと呼ぶのは何とな…

特定の利用環境を想定しない

メディアクエリは相変わらずこんな感じで指定している。 メディアクエリを指定するときなどに注意しておきたいのは、変化はデバイスサイズによって見ることができるが、見た目を変化させる基準となるのはコンテンツだということだ。 想定するデバイスサイズ…

デバイスの進化に追いつく

デスクトップ、モバイル、タブレット、テレビ、ゲーム機など、Web にアクセスできるデバイスは次第に数を増している。 今やモバイルとタブレットの境界は曖昧だ。ファブレットなんていう糞な言葉が出てくるくらいには。 そして、間違ってはいけないのが、デ…

HERALD ロゴ

HERALD は「先駆者」という意味で使っているけど、ロゴの形はこの意味に沿ったものになってるんじゃないかな。自分で改めて見て思った感想だけど。 ファイル整理をしてたら数カ月前に作ったデザインが出てきた。おそらく Home Town のロゴを公開する少し前に…

画像を避けながら文字を配置するレイアウト

ページにストーリーというか、おもしろい流れを作りたいと思って考えてみたのが次のレイアウト。 最終的にはこうなったけど、始めに思いついたものとはかなり変わってる。セクションの移動に砂時計が下に落ちるみたいなイメージをつけれたら良いなと思って作…

これからの制作中に意識すること

デザインやコーディングといった製作をするにあたり、これから3ヶ月間、製作が終わったタイミングでどういった振り返りをするかを決めた。製作中からこれらを意識していきたい。 製作のスピードは上がったか? 制作物の質は向上しているか? 論理的な主張は…

デザインデータの管理方法

デザイン制作時には Adobe の Fireworks や Illustrator を使っていますが、製作物のデザインデータを 1つにすべて収めようとするとファイルが重くなりがちです。その結果、突然アプリケーションが落ちてしまうことになります。ファイルを保存してないときに…

スキルアイコンとプロジェクトアイコン、その2 !!!

以前にこういうものを作りましたが、やっぱりアイコンとしては使うには色々無理がありました。小さいサイズで表示すると枠の中に描かれているものが見えないし... 。 ということで、新しいのを作りました。 My Skill Icons v2 ( + Project Icon ) デザインア…

ロゴ、チェンジ

以前カメレオンを模した自分のロゴを作ったわけですが、一度もちゃんとした場で使うこと無く Finder の奥深くで眠ることになりそうです。 元々なぜカメレオンのロゴを作ったかというと、この記事にも書いていますが次のように考えていました。 僕は環境や時…

スキルアイコンとプロジェクトアイコン

My Skill Icons いま作品集を作っているわけですが、そのなかで使用するデザイン、イラスト、コーディング、プロジェクトのアイコンを作りました。製作中に「使うツール」をメインに据えて考えてみました。 アイコンにしてはスペースの中にいろいろ詰め込み…

デザイン作って文章忘れる

自分でサイトを作るときはデザインから先に作り出すことが多いです。デザイン段階ではテキストエリアに仮テキスト(テキストてきすと... 的なもの)を入れて大体のエリアサイズを決めておき、デザインやコーディングが完了した後になって実際の文章を考えだ…

行間は最初に指定したほうが良い

body や各要素に対して行間( line-height )を指定しておかないと、英語と日本語の文章で微妙に高さの差がでます。 上記の画像はサイズや余白といったデザイン、文章の長さは全く同じです。しかし、行間を見出しや段落に指定していないため、左のもの( Ves…

自分たちでサービスのヘルプを作れたら面白い

一度使ったことのあるサービスに、手軽にポイントを指し示すハイライトやメモ書きを入れて、自分流のヘルプ・チュートリアル講座を作れると良いかもしれない。 人にサービスやツールの使い方を教えることがあるけど、それは指差しや口頭ではなかなか伝えづら…

パソコンで comico の漫画は読みにくい

「スマホで漫画は読みにくい。だから縦スクロールで読めるコミコ!」と CM で謳うだけあって、スマホではある程度読みやすい(サイトやアプリの表示を工夫してるというよりは漫画のつくり的に読みやすい)と思います。しかし、逆にパソコンではかなり読みに…

デザインしてるときに見ているサイト

デザインのアイデアが自分の中で勝手に湧いて来てくれれば良いのですが、なかなかそのようにはいきません。 僕の場合、デザインに詰まったときは以下のサイトを見ています。 ギャラリー ギャラリーサイトは「どのようなサイトにするか」というのをぼんやり考…

Prott の User Meetup に行ってきた

昨日「Prott User Meetup vol.1 TOKYO」というイベントに参加してきました。 スライドに使われてるフォントがかわいいなーとか思いながら取ったメモと、イベント後の感想なんかを書いておこうと思います。 イベントは面白かったし、最後に Prott ノート貰え…

No Image

「No Image」画像作るのって案外難しいよなーなんて思ってます。あと、これ必要かな?とか。 他の箇所では写真とかイラストが入っているわけで、No Image 画像はこれらとはっきり区別する必要があると思います。 僕の場合は、他との違いを出すために次のよう…

GIF アニメのループとディレイ

さっきの「「いいんじゃない」GIFアニメ」、動画ファイルを開いている中でディレイの設定とかしようとしてたけど、こういのうはまず GIF で書きだした後、この GIF ファイルを開いて設定すればよかったんや... 。 ディレイ設定 GIF ファイルを開くと、各フレ…

「いいんじゃない」GIFアニメ

いいんじゃないGIF むかしむかし、どこかに旅行したときに車窓から田舎の風景を Vine で撮りました。この動画を元に、 mp4 ファイルから GIFアニメーションを作ってみました。 動画から GIFアニメーションを作るのは初めてだったので、「Photoshop Tutorial …

Prott のチュートリアルを終えて

だいぶん前に登録だけしていたモバイルアプリのプロトタイピングツール「Prott」の β版のチュートリアルをやりました。 機能が詰め込まれすぎておらず、プロトタイプを作るツールとしてシンプルだったのが良いと思いました。作ったプロダクトを知り合いに向…

サービス体験

Web のデザイナーとして、サイトに訪れる人にとって使いやすいインターフェースを提供することはもちろん必要だと思っています。しかし、それ以上にサイトを訪れた人に「そのWebサイトでしかできない経験」を感じてもらうことも大切だろうと、最近になってよ…

マンガボックスは話が連続して読みやすい

マンガボックスインディースを昨日から読み始めています。 この記事で紹介したサイトの漫画も相変わらず読んでいるので、Web上で無料で読めるマンガが本当に多くなってきたなと思います。 ところで、こういったブラウザを使って読む漫画は1話読んだ後、最後…

色の決定方法の反省

今の自分の色の決定方法はあまり良くない気がします。 ここ数日で「書体が入り混じったブログ記事のデザイン」と「画像フィードのデザイン」というデザインを作り、それぞれの色は基準となる色からHSL空間の変更で決めている、と書きました。 一年前くらいか…

画像フィードのデザイン

画像フィード | JAYPEG 画像フィードと行ったらどうかは微妙ですが... 、あんまり作ったことが無いものを作ってみようということで、今回は Dribbble のような画像がメインとなる投稿が並んだフィードを作ってみました。 参考のために見ていたサイトは次の4…

書体が入り混じったブログ記事のデザイン

書体が入り混じったブログ記事 | JAYPEG ゴシック体(セリフ体)と明朝体(サンセリフ体)を含むブログ記事のデザインを作りました。 明朝体はブログのタイトルとか、記事の本文とかコメント本文で使っています。その他はゴシック体にしています。 Webではあ…

プラチナカラー

ベタでプラチナという色をつけるのが難しい。 例えばプラチナ、ゴールド、シルバーで順位をつけてデザインを分けなければいけないときによく悩みます。 各用語でカラーコードを検索してみるといくつか出てきます。 platinum color code gold color code silv…

CHROMA v1

一ヶ月前からやっていたブログのデザインが終わったので、ここに CHROMA v1 を発表しよう。 デザインは JAYPEG に、コードは GitHub に置いた。 CHROMA | JAYPEG CHROMAのロゴ | JAYPEG thleap/chroma-blog-style | GitHub デザイン はてなブログの初期設定…

Home Town のロゴ

Home Town - thleap | JAYPEG 2時間かけて「Home Town」のロゴを作った。「Town」を強調したかったので、「Hometown」ではなく「Home Town」にした。 Johnson's Backyard Garden で使われているフォントを、探しものをしている時にたまたま見つけてなにか作…

太陽光発電の見積もりサイトのデザイン

太陽光発電の見積もりサイト - thleap | JAYPEG 「Solar Panel」という架空の太陽光発電見積もりサイトのデザインを作ってみた。 太陽光発電は環境にも配慮した電力の発電方法ということもあり、サイトを見た人には優しく澄んだ印象(エコロジーな感じ)が伝…

ブログ記事のデザイン

落ち着いた雰囲気のブログ - thleap | JAYPEG ブログ記事のデザインを作った。リンク先にはデザインの全体が見えるものを置いていて、リストやテーブルなどの各要素が見えるようになっている(画像がぼやけてるけど.. )。 落ち着いて文章が読めるようなもの…

リンクの状態を示せ

リンクの状態はわかりやすく表したほうが良いと思う。 例えばこのようなリストでは "訪問済み" 状態のスタイルをリンクに指定おかないと、どのリンクを踏んだか後から区別がつきにくい。 Example thleap の Tweet / 5:38 PM - 7 Jul 2014 thleap の Tweet / …

ブログのロゴとファビコン

ロゴとファビコンを製作してブログに適用してた。 「思いついた時にすぐに文章を残す」という姿勢でブログを更新していきたいと思っていて、それを表すようにロゴはポケットにノートとペンを入れていつでも文章を書く準備万全!みたいなモノにした。 昨日書…

ブログのロゴを製作中

このブログ(CHROMA)で使うロゴを作ってる。 ポケット + ノート + 鉛筆をロゴに含めようとしてる。 雰囲気で作り始めたけど少しずつ出来てきた。 ポケットの部分に線が多く、縮小したときにそこが潰れて何がなんだかわからなくなる。 16px 以下だと本当に何…

Fireworksでの線のひき方

一方向の線、二重線はこんなふうにひいてる。 一方向の線 長方形に線を出すときはフィルターのソリッドシャドウを使う。 ベタ塗りにチェックを入れて好きな色を指定し、角度を指定して線を出す方向を決める。 上方向 ... 90度 下方向 ... 270度 左方向 ... 1…

サイズの決定

文字サイズ -> 行間 -> 幅や高さ、余白 こんな順序で決めていったらいいんじゃないかと思ってる。 文字サイズはサイトの基本的なレイアウトを作成後、一行に入る文字数を考えながら決定する。 このブログでは一行に全角文字が 40字入るようになってる。 行間…

銀座カラーの広告

広告ギャラリー | 脱毛の銀座カラー 電車内によく貼ってある銀座カラーの広告が好きだ。 この脱毛専門店の広告は、色鮮やかで整ったデザインの中に見る人をクスッと笑わせる面白さが含まれている。 特にキメた服装をした男女二人がユニークなポーズをしてい…

人間中心設計とユーザビリティ

「初心者のためのHCD入門」というセミナーに参加してきた。 そこで聴いてきた内容は Gist に書いた。 「人間中心設計の考え方」の講座を聴いて 「新入社員のためのユーザビリティ評価」の講座を聴いて このメモは別に自分で気になったこと、思ったことを書き…

はてなブログ、シンタックスハイライトの変更

はてなブログ、少し色が明るすぎる気がしてたのでコードのシンタックスハイライトを変更をした。 Class Hex Color .synSpecial #FF00FF .synType #00B300 .synComment #B3B3B3 .synPreProc #4D00B3 .synIdentifier #00B3B3 .synConstant #CC0000 .synStateme…

行間の値

行間.. 見れば見るほど何が最適なのかわからなくなってくる。 line-height: 1.6 は少し狭いような気が文章が黒い塊に見える。1.7 以上は逆に行間が開きすぎて空行との区別がつきにくいように感じた。結果、間を取って 1.65 にした。 文字サイズや周囲の余白…

ロゴ、一丁上がり

僕は環境や時間によって気持ちが移り変わりやすいので、そのイメージからシンボル部分はカメレオンにした(七変化、みたいな)。全体的に可愛らしく仕上がったと思うけど、ペロンと出した舌とジーッとこちらを見つめる目が少し憎たらしさを感じさせる。 ロゴ…