Sassの色生成ジェネレーターを作りました
「Sass Color Generator」というSassのlightenなどの色生成ツールを作りました。 このツールは、デザイナーが効率的なカラーバリエーションのデザインをしやすくするものです。 例えば、デザインを作るときにメインのカラーを指定すると、その薄い色を背景色にしたり、枠線色にしたりする場合があると思うのですが、その色を見つけやすく、また指定しやすくします。 できること カラーコードと%の数値を入力すると、そのカラーの%ごとの明度や彩度のカラーバリエーションを一覧で見ることができます。 使い方 1.カラーコードを入力します。 2. %の数値を入力します。 この数値ごとに、lightenなどの色が作成されます。 色の説明 lighten…明度（上） darken…明度（下） saturate…彩度（上） desaturate…彩度（下） マークアップエンジニアとの協業や、Webサ
photoshopで枠線つき吹き出しをつくるときのちょっとしたコツ
ご存知の方も多いかもしれませんが、最近発見したので覚え書き。 吹き出しって三角の位置を微妙に修正することが多いと思うのですが、枠線つきの吹き出しって修正しづらくないでしょうか？ ※作成・確認環境は、Photoshop CS6です 例えば自分が配布しているSVGの吹き出しもそうなのですが、三角の部分を移動したり大きさを変えたい場合、パスが全て連結されていて動かしにくかったりします。 三角の部分を動かすには、土台の図形と三角部分を別々にすると良いですね。 吹き出しの図形をそれぞれシェイプで描きます。 このとき、吹き出しの三角の方は、パスを閉じないようにします。 ※訂正です、パスは閉じても閉じなくても表示は変わりませんでした。 良く確認せず申し訳ありません…。 2つの図形をちょうど良いところで重ね、ショートカットキーの「Ctrl + E」で結合します。 （レイヤーのところで右クリック→「シェイプ
テキストのメリハリをつける方法7つ
私のデザイン修正で一番多い指示が、「メリハリをつけてください」で、以前はどうすれば良いかわからず困っておりました…。(今も時々わからなくなりますが…) 最近ようやくどうすればメリハリがつくかわかってきたので、その方法をまとめてみました。 「メリハリをつけてください」の修正意図は、目立つべきところが目立っていないので、重要な部分を視覚的にはっきりさせてください、ということだと思います。 例として、以下のような見出しとテキストをもとに考えてみます。 （メリハリをつける場合、サイト全体のバランスをみてつけることが必要ですが、ここではわかりやすくするため、見出しと説明文のみで考えています） （引用：Wikipedia: カメラ http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%A1%E3%83%A9） 私の場合、メリハリをつけるのは以下7つの方法が多いです。
【Photoshop CS6】シェイプの結合・中マドが便利
この機能を知ってから、簡単なアイコンなどの単純なパスでできた図形ならイラレを使わずPhotoshopだけで作れるようになり、大変便利だなぁと思ったのでエントリです。 ※CS6ユーザーの方が対象になります。シェイプの結合・中マド機能のみであればCS6以前にも搭載されているようなのですが、今回はCS6からの機能も使うので、念の為…すみません(；´Д｀) 今回は、簡単なアイコンを作る想定で、シェイプの結合・中マドについて説明していきます。 矢印のアイコンを想定します。 矢印は、三角と長方形の矩形で出来ていますね。 多角形ツールと長方形ツールで 三角形と長方形の図形をつくります。（それぞれシェイプにする） 三角形と長方形の図形を矢印に見えるようくっつけて 2つのレイヤーを選択して、「Ctrl+E」でレイヤーを結合 この操作だけでもそれっぽい矢印ができるのですが、不要なパスが残っているのでパスを整え
Webサイト制作の一連の流れをまとめてみました
Webサイト制作の一連の流れをまとめてみました。クライアント向けにまとめたものを少し手直ししてのせています。新人Web担当者さんや、新人ディレクターさんの参考になるかなと。 なるべく難しい言葉を使わず、理解しやすいよう平易な言葉で書いております。 ※流れや手順は制作会社によって違うのですが、概要はつかめるかなと思います。 目次と流れ 1. サイトのコンセプトを考える 2. 競合他社からクライアントのお店や商品を選んでもらうためのポイント（強み）を整理する 3. そのサイトで一番伝えたい内容を決める 4. お客さんが必要とする3以外の情報や、クライアントの伝えたい情報をまとめる 5. サイト更新は誰がするのかを決める 6. 想定使用デバイス（PCやスマートフォンなど）を決める 7. サイトの周知・宣伝方法を考える 8. ページの設計図をつくる 9. サイト制作にかかわる必要な素材を準備する
ヴィジュアル要素の表現方法
ヴィジュアル要素をつくるときに使えるような、表現方法をまとめてみました。 メインビジュアルなどをつくるとき、うまく思いつかず困ってるんだよねーって方の参考になるかな、と思います。 ヴィジュアルの表現方法としては、大きく分けて以下の2種類があります。 ■直接的な表現 人・物・動物・タイポグラフィなどそのものを主役に置いた表現。 ■間接的な表現 抽象的なメッセージを主役に置いた表現。「たとえ」や「見立て」の技法を使う。 今回は、間接的な表現の中でどんなものがあるか、修辞技法をもとにまとめてみました。 言葉だけ聞くと難しく感じるのですが、普段私たちが話し言葉でも良く使っているものですので、理解しやすいと思います。 比喩 直喩法 直喩（明喩、シミリー）とは「（まるで・あたかも）～のようだ（ごとし、みたいだ）」のように、比喩であることを読者に対し明示している比喩である。 「修辞技法」（2011年12
Webデザインの評価項目をつくる
Webデザインの評価項目というのを、ディレクターやデザイナーの方々はつくっているでしょうか？ 評価項目があると、デザイナーやディレクターだけでなく、クライアントにとってもデザインの基準がわかりやすくなり、目標地点が明確になります。 今までつくったことがなかったという方は、この機会につくってみてはどうでしょうか。 改めて、Webデザインの評価項目をつくるメリットです。 デザイナー、ディレクター、クライアントにとって、デザインを評価する共通認識を持つことができ、三者間で認識のブレが少なくなる デザインの優先すべき項目（もっと企業の色を出したい、など）がわかりやすくなり、それをデザインに反映させることができる デザイナーは、すでに満たされている要素にそれ以上時間をかけることがなくなり、足りない要素に注力できる デザインの評価項目とデザインエレメント一覧表 私はWebデザインの評価項目を、以下のよ
デザイン上級者 21の特徴
デザイン上級者は、中級者と初心者と何が違うんだろう？って思った時に、こちらの本が役に立ちました。 『上達の法則 – 効率のよい努力を科学する –』という本です。この本には、碁や茶道など、あらゆる分野に共通する上級者の特徴がのっています。この本を参考に、デザイン上級者の特徴と、上級者になるための実践方法を書いてみました。 デザイン上級者の特徴 1. 上級者は一つのデザインから読み取ることが多い 一つのデザインを見たとき、上級者の方が中級者、初級者よりも気づくことが多いです。例えば、背景に薄くグラデーションがかかっているとか、縦のグリッドのラインが揃っているなど。 また、そのデザインからたくさんの情報を引き出しているので、長く見ても退屈しにくいという特徴を持っています。 2. 上手なデザインをするということに高い価値をおいている 上級者は、デザインに対して本気で取り組む度合いが高いため、上手な
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
