デザイン時に気を付けたい目的と手段の取り違え
デザインする時、手段ばかり追ってしまい、「( ﾟдﾟ)ﾊｯ!そもそもの目的ってなんだっけ」ってなりがちなので、気を付けたいなと思いまとめてみました。 1. 目的をしっかりと認識する 例えば、上のようなボタンをデザインしたとき、「もっと目立つように大きく、色も赤とか目立つ色にしてください」という修正指示を受けたとします。 「目立たせる」という目的の解決策として、「大きくする」、「赤などの目立つ色を使う」という2つが考えられています。そしていつの間にか、これらの解決索が目的にすり替わっていることが無いでしょうか。 「大きくする」、「赤などの目立つ色を使う」ことを行えば目的を達成できるかのように錯覚するのですが、その解決策は本当に最適かを考える必要があります。そもそもの目的は「ボタンを目立たせること」で、その解決策は他にもあります。 2. 他の手段も考える 「目立たせる」ためには、差別化する、近
Photoshopで少しでも作業時間を短縮するためにしていること6つ
（上記ショートカットは全てコンフリクトしていたのですが、元々使っていなかったショートカットだったため、気にせずそのまま設定しました） 2. 共通パーツのスマートオブジェクト化 例えばリンクアイコンの▶など、ファイル内で同じ形、同じ色のものはスマートオブジェクトに登録しておくと便利です。 色や大きさを変更をするとき、1つのスマートオブジェクトを変更すると全体を変えることができます。 3. ツールプリセットの活用 ツールプリセットは、自分の良く使うツールを登録して使うことができます。ショートカットじゃダメなの？ という疑問もあると思うのですが、ツールプリセットでは、特定のサイズのブラシや、特定のシェイプなど、○○ツールの○○、というように詳細に登録することができます。 例えば私は、右向きの三角形や星のシェイプなど、良く使うものを登録しています。 登録方法は、そのツールを選んだ状態で、右から2番
左右フリックで前後ページ（コンテンツ）に移動するときのUI
左右フリックで前後ページ（コンテンツ）に移動するサイトやアプリがありますが、使いやすいのと使いにくいのがあったので気づいた点のメモです。 使いやすいUIの特徴 ・フリックで前後ページに移動することが、フリック中にわかる ・ページ移動をキャンセルできる ・モーションが、前後移動したということがわかる（現在地を見失わない） 使いにくいものは上記の逆です。 では実際にどんなものか、画像を使って説明を書いてみました。 （使いづらい方は自分のスマートフォンサイトをサンプルにしていますが、実際には前後ページの機能はつけておらず、あくまでイメージということをご了承ください） ○使いやすい＆わかりやすい 左は「SmartNews」のアプリ、右は「Gmail」のサイトです。 ×使いにくい＆わかりにくい また、左右フリック移動を使う場面ですが、類似コンテンツであればこの機能は便利と思うのですが、記事や違う内容
PCとスマホサイトで情報の出し方を変えた方がいいと思う理由
PCとスマートフォンでは使うシチュエーションが違うので、情報の出し方をそれぞれ最適化したものにするべき、とは言われており、私もその通りだと思います。 ではなぜそうすべきか、シチュエーションが異なる時の心の動きをもとに理由を掘り下げて考えてみました。 PCとスマホ利用時では、認知資源の消費量が違う 認知資源とは、情報を得たり、注意を払ったり、記憶をしたり、などの知的活動をするための脳のリソースです。 PCサイト閲覧時は、椅子に座るなどし、外からの刺激をほとんど受けない状態で情報を探していることが多いと思います。しかしスマホ利用時は、道を確認したり、人を避けたり、などの注意を払っていることが多いです。（ながら歩きはしないよう啓発がされていますが…） 例えば、飲み会があり、とあるお店へ辿り着かなければいけないとき… お店の位置の確認 自分の位置の確認（看板や建物などから手がかりを見つける） 車な
photoshopで枠線つき吹き出しをつくるときのちょっとしたコツ
ご存知の方も多いかもしれませんが、最近発見したので覚え書き。 吹き出しって三角の位置を微妙に修正することが多いと思うのですが、枠線つきの吹き出しって修正しづらくないでしょうか？ ※作成・確認環境は、Photoshop CS6です 例えば自分が配布しているSVGの吹き出しもそうなのですが、三角の部分を移動したり大きさを変えたい場合、パスが全て連結されていて動かしにくかったりします。 三角の部分を動かすには、土台の図形と三角部分を別々にすると良いですね。 吹き出しの図形をそれぞれシェイプで描きます。 このとき、吹き出しの三角の方は、パスを閉じないようにします。 ※訂正です、パスは閉じても閉じなくても表示は変わりませんでした。 良く確認せず申し訳ありません…。 2つの図形をちょうど良いところで重ね、ショートカットキーの「Ctrl + E」で結合します。 （レイヤーのところで右クリック→「シェイプ
Twitter、Facebook(アプリ)のデザインから学ぶ立体感のつけ方
TwitterやFacebookのデザインを良くみてみると、立体感のつけ方に一工夫あるのがわかります。（現在のデザインになってからだいぶ経っており、今更な感じですが…）その立体感のつけ方が洗練されていて良いなぁと思ったので、どのように作られているかをまとめてみました。 再現PSDデータをダウンロード ※アイコンは本物と異なっており、形の近いものを使っております。ご了承ください。 1. Twitter ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出してみました。 アイコンと文字（現在地表示） アイコンと文字（通常表示） ボタン これらを再現してみると、以下のようになります。 偽Twitterみたいな感じですねｗ それぞれにつけた効果の詳細は実際のファイルでご確認ください。 2. Facebook（アプリ） ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出
デザイン上級者 21の特徴
デザイン上級者は、中級者と初心者と何が違うんだろう？って思った時に、こちらの本が役に立ちました。 『上達の法則 – 効率のよい努力を科学する –』という本です。この本には、碁や茶道など、あらゆる分野に共通する上級者の特徴がのっています。この本を参考に、デザイン上級者の特徴と、上級者になるための実践方法を書いてみました。 デザイン上級者の特徴 1. 上級者は一つのデザインから読み取ることが多い 一つのデザインを見たとき、上級者の方が中級者、初級者よりも気づくことが多いです。例えば、背景に薄くグラデーションがかかっているとか、縦のグリッドのラインが揃っているなど。 また、そのデザインからたくさんの情報を引き出しているので、長く見ても退屈しにくいという特徴を持っています。 2. 上手なデザインをするということに高い価値をおいている 上級者は、デザインに対して本気で取り組む度合いが高いため、上手な
[Photoshop] シンプルで、きっと使い勝手の良いパターン素材
コツコツと作りためていたPhotoshop用のパターン素材を配布してみます。 下の画像だとわかりづらいですが、背景がグレーの部分を透過しているものが多いです。 なので色を重ねたり、描画モードを変えたりして色々と組み合わせて使うことができます。色や描画モードによって表情も変わってくるので、ぜひお試しください。 使い方 ダウンロードしたzipファイルを解凍する。 パターンファイルを選択し、開いているPhotoshop内にドラッグする。 それで追加されなければ、『レイヤースタイル』→『パターンオーバーレイ』→パターンのサムネイルクリック→右の設定アイコンをクリック→『パターンの読み込み』を選びます
![[Photoshop] シンプルで、きっと使い勝手の良いパターン素材](https://cdn-ak-scissors.b.st-hatena.com/image/square/828fb7b3035595c8262e48beaa0830a02296e031/height=288;version=1;width=512/http%3A%2F%2Fwww.ar-ch.org%2Fwp%2Fwp-content%2Fuploads%2F0404_s.png)
[Photoshop]マスクの方法まとめ
Photoshopのマスクのかけ方は、大きく分けて、『クリッピングマスク』、『レイヤーマスク』、『ベクトルマスク』の3種類があります。 それぞれの作成方法をご紹介します。 クリッピングマスク レイヤーマスク ベクトルマスク（CS6, CC） ベクトルマスク（CS5？以前） クリッピングマスク すぐ下にある下層レイヤーのオブジェクトの形に切り抜くマスクです。 一番簡単なマスクですが、オブジェクトを動かす時に、マスク部分も選択しなければいけないという煩わしさもあります。 01) 切り抜きたい形のオブジェクトを作成します。 パスの図形でも、フリーハンドの図形でも大丈夫です 02) 切り抜きたいレイヤーを、その上に置きます。 03) レイヤーの間を、「Alt+クリック」します。 アイコンが写真のように変化し、マスクがかかりました。 調整レイヤーも同じようにマスクがけできます。 レイヤーマスク 選択
![[Photoshop]マスクの方法まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/bb45a436e313479c083a441149c4b60b22112d10/height=288;version=1;width=512/http%3A%2F%2Fwww.ar-ch.org%2Fwp%2Fwp-content%2Fuploads%2F05_s1.png)
テキストのメリハリをつける方法7つ
私のデザイン修正で一番多い指示が、「メリハリをつけてください」で、以前はどうすれば良いかわからず困っておりました…。(今も時々わからなくなりますが…) 最近ようやくどうすればメリハリがつくかわかってきたので、その方法をまとめてみました。 「メリハリをつけてください」の修正意図は、目立つべきところが目立っていないので、重要な部分を視覚的にはっきりさせてください、ということだと思います。 例として、以下のような見出しとテキストをもとに考えてみます。 （メリハリをつける場合、サイト全体のバランスをみてつけることが必要ですが、ここではわかりやすくするため、見出しと説明文のみで考えています） （引用：Wikipedia: カメラ http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%A1%E3%83%A9） 私の場合、メリハリをつけるのは以下7つの方法が多いです。
Photoshop ややこしいパスの操作をおさらいする
Photoshopに限らないのですが、パスの操作は慣れが必要で、またわかりにくかったりもしますね。 うちのブログに、「Photoshop パス」で検索してくる方が多く、しかしそれに応えられる記事がなかったので書いてみました。 ややこしい原因 ペンツールの挙動がつかめない、読めない 操作をするのにいろいろなツールがあって把握できていない しかし、パス操作は、基本のペンツールと2つのショートカットを覚えれば簡単に理解できます。 基本的に、ツールの変更はショートカットを使って行います。 そうすることで時間短縮＆操作がしやすくなります。 それではいくつかの例をもとにパスの操作を解説します。 1) アンカーポイントを移動する 角丸での大きさ変更を例にします。 ペンツールを選択し、Ctrl (command) を押してパス選択ツールにし、角丸図形をクリックします。 大きさを変えたい辺の4点を囲むように
【商用無料】Sweet&Chicなベクターシェイプアイコン6種×2色
スイート＆シックなベクターシェイプアイコンを作りました。ファイル形式はPSDです。 汎用性は低いですが、結婚式場などのフォーマル目なサイト、上品な雰囲気の商品やサービスを取り扱っているサイトに合うと思います。 ご使用にあたって 以下を守ってお使いください。 禁止事項 × 再配布、またはダウンロード可能な状態にすること × 販売 × 素材への直リンク 許可事項 ○ パスの変更・着色・拡大縮小などの加工 ○ 商用・非商用サイトでの使用 ○ Web、プレゼンなどの資料、ソフトウェア、印刷物への利用 アイコンは大きめのまま使うのがきれいです。縮小をすると、ご自分での調整が必要になるかもしれません…。 ただ、色変えなどの加工をしやすいよう作ってありますので、迷わずできると思います。 以上です。お役に立ちましたら幸いです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン制作のインスピレーションになるRSSまとめ | Arch