MEMOGRAPHIX
ブログを移転してしばらく経つ。なにかあったとき引っ込められるように、しばらくは特に告知せず書き続けていたのだが、問題なかったので新たなURLで引き続き活動することにした。 新ブログは下記。お手数ではあるがRSSやらブックマークやら購読やらの変更をお願いしたい。 http://text.sanographix.net過去記事の移転は大変なのでやらない。今後もそのままこのtumblrで見られる。また、移転後も特に記事の書き方は変わらず、こんな調子で書くことにする。 4年半Tumblrで日記を書いてきて、大変お世話になった感がある。が、いまべつのプロジェクトでTumblr結構触ってるし、引き続きほかの場所では世話になりそうである。 引き続きこちらでよろしくお願いします。 同人サークル konel（旧 jadda+）では、8/14のコミックマーケット90で新刊を頒布する。詳しくは下記の告知サイトか
光を効果的に使用したPhotoshopのチュートリアル集：Part 13
光、光源、光線、光跡を効果的に使用したPhotoshopのチュートリアル集のPart 13です。 Michael Jackson Wallpaper Soul Rebel Poster Tutoria
サイト閲覧者の潜在的意識に訴えかけてコンバージョンを高める「画像」選びのテクニックとその実例
ウェブサイトに用いる写真の選び方・使い方によってサイトを閲覧する人の潜在的な意識に働きかけて、サイト自体の印象をコントロールし、究極的にはより良好なコンバージョンを得るためのコツを、マーケットリサーチやSEOに携わるニック・コレンダ氏がブログで明らかにしています。 Which Stock Photos Convert Higher? http://www.nickkolenda.com/which-stock-photos-convert-higher/ 人間は写真を見たときに脳のさまざまな回路が刺激を受けて、無意識のうちにさまざまなイメージを連想するものだとのこと。そのため、この無意識の「連想ゲーム」を逆手に取ることで、読者にサイトポリシーを明確に伝えたり、より良いコンバージョン率を達成したりできるとコレンダ氏は考えています。 コレンダ氏はさまざまな学術論文を参考に、人は写真や画像から以
ノンデザイナーのための25のグラフィックデザインのコツ | POSTD
>このコツを大いに活用してグラフィックデザインに挑戦してみてください！ ソーシャルメディア向けのデザインからイベント用の招待状まで、どんなデザインであろうと使えるグラフィックデザインのアプリはたくさんあります。 ペアリングフォントやスケールから行揃えやホワイトスペースまで、デザインの世界は複雑な面を持ちます。この25のグラフィックデザインのコツが、創作過程のあれこれを通してあなたの手助けになるでしょう。 各項目をイメージした画像をクリックして、 独自のデザイン に編集してみましょう。楽しいデザインを！ 01. フォント頼みをやめて、書体を制限してみる このデザインを編集してみる シンプルかつ効果的なグラフィックデザインのために読みやすいフォントを使いましょう。いくつもの書体を使用したデザインは読みづらいものです。統一されたフォントを使うようにしましょう。 ここではAileronのフォントフ
CSSで括弧を表現したサンプル - NxWorld
丸括弧（） 頭から微妙な見栄えですが、**丸括弧（）**を表現してみたものです。 HTMLとCSSはそれぞれ下記のようになっており、擬似要素を使って生成したものにborder-radiusを指定します。 <div class="parenthesis"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p> </div> .parenthesis { position: relative; width: 500px; padding: 15px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .parenthesis::before, .parenthesis::after { position: absolute; top:
デザイナーじゃない人が気をつけるべきデザインの基本。（10万PV越えに感謝。5年ぶりに追記） : 雲の上に音符あり。
友人のデザイナーがアプリのデザインをタダでやってくれることになったとします。あなたはさぞかし「持つべき友よ」と自己満足に浸ることと思います。でも、その瞬間に糞アプリが決定します。 20本に19本が糞アプリというのと同じように20回のうち19回のデザインが糞デザインだったりします。この状況は実は簡単に打開できます。20回リテイクを繰り返せばいいだけです。 カードゲームバトルをやっているディレクターも同じことを言ってました。カードのデザインでは、20回のリテイクなんて当たりまえだそうです。 また製造メーカーの開発者も「自社デザイナーで使える奴がいないんだよな」とぼやいておりました。つまり、どの分野であれ自称デザイナーのほとんどが屑同然ということでもあります。 さすがに友達に20回も出し直しさせたら人間関係にヒビが入りますよね。でも、あなたの命を注ぎ込んだ制作活動を邪魔する者は排除すべきなのです
Bluetooth・USB・Macのコマンドキーなどのロゴ・シンボルのデザイン由来まとめ
GoogleがGmailをリニューアルした際に文字を書く代わりにすべてをアイコン化したのは、全世界展開しているがゆえに各地域の言語に頼らず、ぱっと見るだけで機能をイメージしてもらう方がよいという判断であったわけですが、同様にして「Bluetooth」「Macのコマンドキー」「電源ボタン」「USB」「ピースマーク」といったロゴやシンボルも同じような目的で作られています。では、一体どのような由来でああいうデザインになったのか？というのがよくわかるムービーがYouTubeで公開されています。 Mind-Blowing Origins Of Everyday Symbols - YouTube ◆Bluetooth 900年代後半、Harald Bluetoothというノルウェーとデンマークを治めたヴァイキングの王がいました。 Bluetooth規格を発明した開発者は、二国間を交渉のみで平和的に統
小さな変更で大きくUXを改善するマイクロデザインってなに？ | WebNAUT by Beeworks
※この記事は2015年2月4日に執筆された記事です。 1月も過ぎ2015年のトレンド予想も出そろった頃でしょうか？ 王道な話題が語られるなか、数名の海外デザイナーからマイクロデザイン、マイクロコピー、マイクロインタラクション、マイクロUXといった言葉があがっていたのが気になったデザイナーTXです。 このマイクロデザインという言葉、概念としては新しくないのですが、 日本ではまだまだ認知度が低いようなので今回はその”マイクロ”な部分をクローズアップしていきたいと思います。 目次 マクロデザインとマイクロデザイン マイクロコピーとは？ マイクロインタラクションとは？ マイクロデザインとブランディング まとめ マクロデザインとマイクロデザイン マクロ/マイクロデザインを家で例えるなら、マクロデザインはその家の外観でマイクロデザインはドアの種類や階段の形などの細部のこと。 WEBデザインでいうと、マ
第5回 カラースキームを決めるために必要なツールと注意点 | gihyo.jp
前回は自己紹介をの制作を題材にして、参考資料を活用することにフォーカスしてお送りしました。今回はさらに細かいところにフォーカスしていきます。 カラースキームを固める 前回考えたプロセスの中で、自己紹介に関連するキーワードを書き出してみました。 それらのキーワードをもとに、今度はページのカラースキームを考えてみましょう。 基本のベースカラーが決まれば、そのカラーを基準にパレットのバリエーションも増やすことができます。 配色については、色彩理論[1]を身につけておくとカラースキームを考えるときに役立ちます。 また、色彩に関するセンスは経験によってより洗練されていくものだと考えています。いろいろなパターンを作りながら、試行錯誤していくことが大切です。 Web 上だけを見ても自動的にカラースキームを生成してくれる、便利なカラースキームジェネレータなどが多くあります。ゼロからつくれなくても、こういっ
シルエットを主題にしたかっこいい写真を撮るための8つのTips
写真：Swing to Heaven シルエットはあらゆるものから作り出されます、しかしその中でも良質なものがあります。二次元の写真にすることを想像しながら、力強いはっきりとした形状もったものを選択してください。 シルエットは主題のカラー、テクスチャ、トーンをみせることはできません、主題の形だけです。 フラッシュは使わない シルエットを撮る時は基本的には、主題の前にわずかなライトがあれば十分です。 とはいえ、フラッシュは絶対使用してはいけないものではなく、フラッシュを使った素晴らしいシルエット写真もあります。 シルエット写真のベストなライト 写真：Bikers 主題の前にライトを置く代わりに、背景から多くのライトを必要とするシルエット写真は写真撮影について学んできたものを捨てて、後ろ向きに考える必要があります。 シルエット写真のための完璧なライトは、日没または日の出の光です。これは明るいラ
デザイナーがいいロゴを作るための7つの最低条件
デザイナーのみなさん、ロゴ好きですか？ 私は三度の飯よりロゴが好きです。 その始まりは4〜5歳の頃。 地元熊本にサンリブとマルショクって同じ系列のスーパーがありまして、 このロゴが形は同じなんだけど一部がベタ塗りか斜線かって違いがあって、 それだけで印象がまるで違うんですね。 「サンリブ垢抜けてんなー」 「マルショク田舎くせーなー」 って子供心に感じてたんです。 それから色んなロゴが気になりだして 今では自分で作っちゃってるので天職ですね。 今までにご提案したデザインの数だけでいうと1,000点以上制作しています。 バランスの取れた一般的なデザイナーさんはそこまで作る機会ないのではないでしょうか？ 他のデザインに比べたら特殊な技術が必要なので、慣れるまでは数をこなさなきゃいけない。 でもそこまで頻繁に依頼がくるわけではないのでイマイチいつもピンとこない。。 そんな方多くないですか？ そこで
Photoshopのシェイプツールでオブジェクトの輪郭をくっきりさせる方法
知ってる人には当たり前だと思いますが、Photoshopのシェイプツールを使って描いたオブジェクトの輪郭をくっきりさせる方法を紹介します。 Fixing Photoshop's Shape Tool [ad#ad-2] 上記だと違いが分かりにくいかもしれないので、拡大すると下記のようにオブジェクトの輪郭がくっきりしているのが分かると思います。
角丸に角丸を入れ子にした時、それぞれの角丸をバランスよくデザインする方法
角丸のパネルに角丸のパネルを重ねたデザインで、それぞれの角丸はどのくらいにしていますか？ 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。 こういった時の一つの目安として、バランスが良い角丸のデザイン方法を紹介します。 しっかりとした数値で2つの角丸をデザインすることができます。 Quick Tip: Rounded Corners Done Right 見た目的になんとなくデザインではなく、親と子の角丸の中心点を揃えてカーブを描きます。こうすることで、2つの角丸は非常にバランスのとれたものになります。
ポータルサイトのデザインリニューアル案件で気をつけたこと＆使える心理学 - Design Color
色を使いすぎない 以前に書いた「ポータルサイトのデザインをする時に意識したこと5つ」という記事でも触れましたが、今回も特に気をつけました。 ポータルサイトは一画面に表示される情報が多いです。文字はもちろん、画像の量が多くなります。サイトによってはバナー広告もあるので、それらの色に加えて、サイト自体の色もカラフルだと、目が疲れてしまいます。 そのため、色数を極力おさえることでサムネイル画像やタイトルに注目が集まるよう心がけました。そうすることで、ユーザーは情報を探しやすくなり、記事を読む事に集中できます。 逆に、色がゴチャゴチャしてどこを見たらいいのかわからない状態になると、ユーザーの離脱を招くことにもなるため注意が必要です。 選択肢は4つ程度にとどめる 今回のリニューアルにあたり、ポータルサイト内の選択肢を極力4つ程度にとどめる工夫をしました。その理由についてはふたつの心理学が関係していま
Pixel Perfect Precision Handbook 3
We're excited to announce that the latest Pixel Perfect Precision Handbook is available to download now (PDF, iBook). With over 40 pages of fresh content, as well as updates to what was already there, we've made the third generation of the handbook bigger, better, and more beautiful. So, what's new? Branding and Retina ImagesAt first glance the most obvious change is our new branding — with bold t
地味に効く！ Illustrator のテンプレートとスクリプトの小ワザ for #resem21
2014年12月3日（水） 第21回リクリセミナー「Illustratorで作ろう！10倍ラクするWebデザイン」で登壇したときのスライドです。 LINEスタンプの制作データを材料に、 Illustrator テンプレートと書き出しスクリプトについてご紹介しました。 当日のセッションでスライドを使わずにデモした部分は、参加者の方向けに後日フォローアップ記事を公開予定です。 参考： LINEスタンプ用 Illustrator テンプレートと書き出しスクリプト http://awayuki.hatenablog.com/entry/2014/07/25/124621 Scripting Developer Center | Adobe Developer Connection http://www.adobe.com/devnet/scripting.html Illustrator入門（入門
Photoshopできれいに切り抜く!ふわっとした髪の毛の切り抜き方法
Photoshopで細い毛先やふわっとした髪の毛をきれいに切り抜く方法です。 今回は画像の切り抜きの中でも難しい、髪の毛の切り抜きです。Photoshopではさまざまな画像の切り抜き方法がありますが、今回使用する機能は、CS5以降の「境界線を調整」です。 CS5以下のバージョンの方も、最後に切り抜きの境界線を合成した背景となじませる方法もご紹介しているので、ぜひ参考にして下さい。 「クイック選択ツール」や「投げなわツール」などで切り抜きする対象物をざっくりと選択します。ふわっとした髪の毛の細い部分も、上図のようにざっくりとした選択で大丈夫です。 今回はshutterstockで購入した写真を使います。 （上記写真はshutterstockで購入した写真です。こちらの写真を使用する際は必ず同サイトで購入し使用して下さい。） 選択した状態で、オプションバーの「境界線を調整」をクリック、ダイアロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
新着記事
[CSS]全幅960+10pxをベースに汎用的に展開するグリッドシステム