UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス

2019/10/31 803 users コリス Visu 均整 錯覚 違和感

WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visu... 続きを読む

これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ | コリス

2018/03/06 740 users ユーザーインターフェイス コリス レイアウト ライセンス 印象

Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを... 続きを読む

これぞプロのデザインテクニック！簡単なのにすごい、アイコンを作るテクニックのまとめ | コリス

2017/03/07 612 users コリス ライセン 矩形 アイコン テクニック

オリジナルのアイコンを作るシンプルで簡単なデザインテクニックを紹介します。 円や矩形などの基本的な形を組み合わせたり、変形させたりして、さまざまなアイコンを作成します。 作業に慣れてしまえば、どれも1分もかからずにアイコンを作成できます。 The Super Simple Guide to Iconography 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセン... 続きを読む

デザインのこつが分かる！確実に身につけておきたいプロ直伝の50のデザインテクニック -Pro Design Tips | コリス

2015/07/12 703 users タイポグラフィ コリス コツ エフェクト スキルアップ

グラフィック、タイポグラフィ、カラー、エフェクト、要素の構造、配置など、デザインのスキルアップに役立つ50のデザインテクニックを紹介します。 50 Tips to Make You a Better Designer 下...記事の続きを読む 続きを読む

Illustratorをマスターする！すごいチュートリアル、使い方まとめ 2015年7月度 - PhotoshopVIP

2015/07/09 523 users PhotoshopVIP Illustrator ワーフ

不定期となりますが、これからのデザイン制作に活用したいIllustratorの作り方、チュートリアルをまとめています。今回は２ヶ月ぶりとなる、2015年７月度まとめです。 ブレンドツールやワープ、ペンツール、グラデーションメッシュなど基本的で、分かりやすい機能をうまく駆使することができる、有益なデザインテクニックを中心に、新作チュートリアルをまとめています。これを機会に、Illustratorのデ... 続きを読む

デザインは基本が大切！ひとつ一つをしっかり見直しておきたい20のデザインテクニック | コリス

2015/06/15 628 users コリス カーニング エフェクト デザイン フォント

文字の扱い方、レイアウト、カラー、エフェクトなど、プロのデザイナーがこだわっているデザインの基本となるルールと、ついやってしまう間違いとその解決方法まで、ワンランク上のデザイナーになるためにひとつ一つをしっかり見直したい20のデザインテクニックを紹介します。 カーニングとはフォントの文字間のスペースを調整することです。カーニングの最終目的は、それぞれの文字の間が不自然な空白にならないように字面間の... 続きを読む

リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)

2012/03/12 1325 users Fireworks エッチング フェンリル テクスチャ 水平

iCloud 風アイコン iCloud 風アイコン2 こんにちは、イメージ担当の長谷川です。 今回は iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラ... 続きを読む

リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。 (フェンリル | デベロッパーズブログ)

2011/11/11 1305 users ガンプラ プラモデル 奥行き フェンリル 長谷川

こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか？ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すために... 続きを読む

ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。 (フェンリル | デベロッパーズブログ)

2011/08/19 1367 users フェンリル 余白 デベロッパーズブログ 文字 使い方

こんにちは、デザイナーの長谷川です。 今回は僕が普段気をつけている、ちょっと意識するだけでスッキリしたデザインになるレイアウトのコツをご紹介します。 デザイナーじゃない方も、企画書や簡単な UI のモックアップ、Web や雑誌のレイアウトなどに応用できると思いますので、ぜひ参考にしていただければと思います。 1. 上下左右のマージンを均一に Web デザインや UI デザインの要素全てに対して隣り... 続きを読む

CSSでマルチカラムレイアウト（1/6）：CodeZine

2010/03/17 655 users CodeZine クロスブラウザ CSS XHTML+CSS

はじめに　本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。　今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」... 続きを読む

デザインを魅力的なものにする、シンプルな10個のテクニック | コリス

2009/04/06 593 users 意訳 コリス フォーカス Smashing Magazine

デザインを魅力的なものにする、シンプルな10個のテクニックをSmashing Magazineから紹介します。 10 Simple and Impressive Design Techniques 以下、その意訳です。 手間のかかるデザインテクニックは高度な効果を与えることができますが、間違ったところに使用してしまうと、意図したフォーカスとは異なり、ユーザーの気をそらすだけになってしまうことがあり... 続きを読む