眺めているだけで創作意欲がどんどん沸いてくる、アイデア満載のクリエイティブなロゴデザインを紹介します。 最近はロゴデザインのよくないニュースしか聞きませんが、本来の楽しさを感じてもらえたらなと思います。
ロゴのデザインの楽しさを再認識！アイデア満載のクリエイティブなロゴデザインのまとめ
眺めているだけで創作意欲がどんどん沸いてくる、アイデア満載のクリエイティブなロゴデザインを紹介します。 最近はロゴデザインのよくないニュースしか聞きませんが、本来の楽しさを感じてもらえたらなと思います。
最近のWebデザインで採用されているレイアウト72種類を収録した無料のUI素材（PSD, AI, Sketch） -UI Tiles
最近のWebデザインでよく利用される1カラム、2カラム、3カラム、カード型、ボード型の基本的なグリッドをはじめ、ランディングページ、プロダクトページ、ギャラリー、ポートフォリオ、カート、FAQ、コンタクト、マップなど、さまざまなレイアウトが用意されたワイヤーフレームやフローチャートを作成するための素材を紹介します。 UI Titles UI TILES: WEBSITE FLOWCHARTS ダウンロードできる素材のフォーマットは、4種類。 .psd（72種類のレイアウトとチャート） .ai（72種類のレイアウトとチャート） .sketch（72種類のレイアウトとチャート） .png（72種類の各レイアウト） 各フォーマットにはそれぞれ72種類のレイアウトとチャートが揃っており、ワイヤフレームやフローチャートやサイトマップとして利用できます。
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (
![[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/9632aee4416db718e0899706ace859f7fdcdf363/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072201.png)
Webサイトのデザインの完成度をアップする、小さなディテールだけど効果が確実にある改善方法
Webサイトのデザインで大切なのは、小さなディテールの積み重ねです。一つひとつは些細なことかもしれませんが、それらをおろそかにしてしまうとWebサイト全体が台無しになってしまいます。 アマチュアのデザイナーが普通によくやってしまう間違いとその改善方法を紹介します。 Top 10 Mistakes that Make your Website Look Unprofessional 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 1. デザインされたテンプレートを使う時の注意点 2. Bootstrapのデフォルトのデザインを使ってませんか？ 3. コンテンツを分かりやすくするフォントの使い方 4. 暗いカラーの背景はデザインが難しい 5. 似たようなボタンを数多く配置するのは逆効果 6. 空白スペースを効果的に使うシンプルなルール 7
黄金比をサイトのデザインに取り入れる簡単な３つの方法 | コリス
その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、１つの値
グリッドシステム -サイトへの有効活用方法 | コリス
グリッドシステムとは、スイスのグラフィックデザイナー：josef muller blockmann（ヨゼフ・ミューラー・ブロックマン）が考案したデザインの手法です。 1981年に刊行した「Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung」は、さまざまなレイアウトにグリッドシステムを用いて、繊細にデザインが行われています。 このグリッドシステムは、エディトリアル デザインで広く利用され、今日ウェブデザインにも多くの影響を与えています。 グリッドシステムの概要 グリッドシステムの機能 グリッドシステムをサイトに導入するメリット グリッドシステムに関する書籍 グリッドシステムの概要 グリッドシステムとは、縦横線の格子（グリッド）を下地として、そこに出来たブロックごとに図版や文字を配置し、デザインを行う
人はなぜ角丸に魅かれるのか、その理由と角丸の効果的な使い方
ウェブのインターフェイスだけでなく、現実の世界でもたくさんの角丸を目にします。角丸は一時のトレンドではなく、デザインのスタンダードと言ってもよいでしょう。 そんな角丸がなぜ好まれるのか、どう使えばよいのか、ウェブページにどのように実装するのかなどを紹介します。 Rounded Corners and Why They Are Here to Stay 下記は各ポイントを意訳したものです。 角丸は目に、そして脳に優しい< 角丸のイメージは安心 -Appleのこだわり 角丸はいつ使用するべきか 角丸の実装：CSS3< 角丸の実装：古い方法 終わりに 角丸は目に、そして脳に優しい ビジュアル認知の権威：Jürg Nänni教授によると、『鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。人間の目は円形のものをより速く捉えることができる。」と述べています。 鋭角と角丸の視線の流れ 鋭
全て商用利用無料！すぐに使えるJPEG素材からオリジナルを作成できるPSDまでブラーな背景素材のまとめ
全て商用利用無料！すぐに使えるJPEG素材からオリジナルを作成できるPSDまでブラーな背景素材のまとめ
最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
個人商用無料でバックリンク不要！デザインに使いたくなる素敵な写真画像がダウンロードできるサイト -DesignersPics
海外の素敵な街並み、食品や料理がキレイに撮られたもの、パソコン・スマホやオーディオグッズがアップで撮られたもの、ファッションやアクセサリー、おもちゃやネコの写真など、デザインに使いたくなるようないいショットが揃った高解像度の写真画像がダウンロードできるサイトを紹介します。 DesignersPics 写真画像は全て個人でも商用でも無料で、Webサイト・プレゼン、パンフレット・パッケージ・ラベル・Tシャツ・看板など、デジタルメディアでも紙でも利用できます。 また利用の際には、バックリンクは特に必要ありません（してくれたら嬉しいなとあります）。詳しくは下記ページをご覧ください。 FAQ and Terms 写真画像は、現在5つのカテゴリで管理されています。 画像のサイズは3,500x2,318pxで、高解像度なのも嬉しいポイントです。
フェルメールやゴッホ、北斎など西洋・日本の名画を楽しめるサイト集 | コリス
フェルメール、ゴッホ、ミロ、モネ、マティス、ゴーギャン、ダ・ヴィンチ、ミケランジェロ、レンブラント、北斎、光琳、若冲など西洋・日本の絵画や浮世絵などを楽しめるサイトを紹介します。
新人デザイナーにオススメ！デザインの要素と原則への理解をアニメで深める動画 -Elements of Design
デザインのさまざまな要素と原則を非常にセンスのいいアニメーションでまとめたショートフィルム「Elements of Design」を紹介します。 「Elements of Design」は50秒ほどの動画で、テンポのいいアニメーションでデザインの要素と原則がまとめられています。 アニメーションが気持ちいいので、あっという間に見終わってしまいます。 Elements of Design 線（Line）から面（Plane）へ、 リズム（Rhythm）を生み出し、バランス（Balance）とスケール（Scale）を調整し、 テクスチャ（Texture）、フレーミング（Flaming）、グリッド（Grid）、カラー（Colour）など、デザインに大切なさまざまな要素と原則がまとめられています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ対応のアイコン素材、単にサイズを変えるだけでなく、デザインを最適化した優れもの！
商用利用無料！ 毛筆・筆文字、ペン字、マジック、手書きの日本語フリーフォント 総まとめ
漢字やひらがなの縦書きにも対応！宛名にぴったりな手書きのフリーの日本語フォントのまとめ