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 以下だと本当に何…

一方向の線、二重線はこんなふうにひいてる。 一方向の線 長方形に線を出すときはフィルターのソリッドシャドウを使う。 ベタ塗りにチェックを入れて好きな色を指定し、角度を指定して線を出す方向を決める。 上方向 ... 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 にした。 文字サイズや周囲の余白…

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

あんまり紙のデザインすること無いんだけど、今回は良い機会に巡り会えたみたい。 フライヤーのデザインした。 WEB と違って紙はここが難しいよと思ったことを書こうとした。でも書いた後、両者で本当に違うのはこの中だと1つか2つじゃないかと思った。 デザ…

はじめに この記事の内容はデザイン書をいくつか読み、仕事で制作を行いながら学んだ僕のデザインに対する考え方です。 一般的なデザインに対する考え方とはかけ離れているかもしれないし、ましてやこれを読んだ人に押し付けたいと思っているわけではありま…

情報（コンテンツ）を区分けすることは大切だ。 デザイナーはデザイン制作の際にこれを考えないことはない。必ず頭に置いてデザインをしているはずだ。 しかし、自分が制作したデザインが十分に情報の区分けができていると勘違いしている場合もある。 それを…

単純な強調を行う方法が 6 つくらいありますね. という話。 今回は文章内で一部を強調したい時. を例に考えてみる。 ボールド体 WEB でも紙でもよく使われる方法だと思う。 何故この方法がよく使われるかというと、テキストと離れた所で不要なものを追加する…

垂直方向・水平方向の中央整列をするとき、大体はツールの整列機能を使えばいいと思うんだけど、それぞれのオブジェクトに強い軸があるものは眼で確認して整列する必要がある。 例えば人（のようなもの）とか 例えば人のように胴体という軸を持っている場合…

いま感じるメリットとデメリット メリット 上手くグリッドレイアウトや色を使うことで、ページ内のコンテンツ毎の領域をよりわかりやすくユーザーに見せることが出来る点。 デメリット 抽象化を図りすぎてボタン等のアクションコンテンツが前後の文脈とか周…

均等空きと均等詰め | jsdo.it 通常の文字組ではベタ組が標準というのを承知の上で、今度のデザインには見出しには均等空き、本文には均等詰めを適用してみたいなーと思うんだけど、どのくらいが文章を人が読む上でベストなのか。 今は class="b" のほうが空…

ラインツールでは出ないんだけど、ペンツールではモアレが出る。 あと始めのアンカーポイントの位置が異なる。 ほむ。

これをベースにした。 こっちが真似て作ったやつ。大分違う。 フォントとか色とははあまり気にせず真似した。 ただ、整列等の揃えの部分くらいは練習がてらもう少し触ったほうが良かったかなぁ. と。 反省 マスク処理の理解ができておらず、時間がかかる シ…

ボタン作った。 別にFireworksが嫌いになったわけじゃない。浮気みたいなもんです。 試したチュートリアル: Photoshopで立体感のあるボタンを作成する方法 普段 Fireworks 使ってるの関係あるか知らんけど、整列を使う位置がわかりにくかった。 あと Photosh…

社内デザイン勉強会で発表してきた。 色彩について | Speaker Deck 発表っていったいーーーーなんぞやーーーーー！ ? ！！ 目次 色の連想と象徴 1-1. 色の連想 1-2. 色の象徴 1-3. 色の三属性（色相・明度・彩度）が表す心理的効果 色の属性とシステム 2-1. …

追記 読んで欲しい所をマーキングした。 はじめに Appleのヒューマンインタフェースデザイン: アップル ヒューマンインタフェースガイドライン を参考に、自分の解釈をまとめてみました。 ガイドラインとして使用できるように文章は簡潔にしたつもりで、デザ…

参考：ヒューマンインタフェースデザイン - アップルヒューマンインターフェースガイドライン ヒューマンインターフェイスデザイン原則 エレガントで、効率的で、直感的な、アクア準拠のユーザインタフェースをデザインするために、決定的な鍵となる原則を提…

Chapter1 1.1 IAを役割と認識するか工程と認識するか、両方を指してはっきりしないことが多い。 IAとは 情報アーキテクチャ（概念や分野） - Information Architecture インフォーメーションアーキテクト（専門家や役割（情報アーキテクチャを行う人）） - I…

はじめにっと いま思いつくもの書きだしてみた。Web製作者じゃない人にフィードバック求めるときにも使いたかったので少しアバウトに書いてるところがある。勉強不足な箇所も多々あるので、今後勉強してもう少しチェックの量や質を上げる( ｰ`дｰ´)ｷﾘｯ 確認す…

はじめに このブログ読んだ人はお口直しに近くのコンビニで雪見だいふく買って食べたほうがいいです。口元真っ白にしちゃってください。 いま久しぶりに憤りを感じて思ってることぶちまけてみただけになってる。 人に”使って”もらうものなら「もっと派手」に…

まぁ、そんなに取り消しできなくなって困ることないんだけど時々、時々ディスプレイ殴りたくなる衝動にかられることあるので変更しとく。 やります 環境設定開く。 メニューバーから firewoeks > 環境設定 または command + u 一般の”最大取り消し回数”変更…