CHROMA

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

Design

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

一昨日作ってると書いた家の部位に関するアイコンができた。 家の部位アイコン | 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 デザイン はてなブログの初期設定…