デザインのアイデアが豊富!最近のWebデザインで採用されているレイアウトやUI要素が揃った素材のまとめ

Post on:2017年3月13日

最近のWebデザインは、フラットデザインやマテリアルデザインが少しずつ進化し、コンテンツにフォーカスされたシンプルなデザインが定着してきました。写真は大きく、テキストは読みやすく、空白スペースは大胆に配置されています。 […]

ブログのタイトルや見出しを効果的にする!キャッチコピーを書くための基礎テクニック

Post on:2017年3月10日

ブログやサイトのタイトル・見出しの文言は、非常に大切です。 ビジターはそこにある言葉を見て、興味を引かれれば、コンテンツを読んでみようという気になります。また、ソーシャルサービスでも記事のタイトルだけ掲載されることが多く […]

[CSS]レスポンシブ対応のフォントサイズの指定方法 -デスクトップやスマホのビューポート幅(vw)に対して文字サイズを変化させる

Post on:2017年3月10日

CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポート幅(vw)に対して自動で変化させるスタイルシートの記述を生成するオンラインツールを紹介します。 例えば、768px以下はすべて […]

[CSS]マージンとパディングの使い分け方 -コンテナとコンテンツ間、コンテンツ内の要素間

Post on:2017年3月9日

CSSでスペースを与える時、マージン(margin)とパディング(padding)はどのように使い分けをしていますか? Webサイトやスマホアプリで実際に使用されるUIコンポーネントを例に、マージンとパディングの使い分け […]

デザインにかなり使える!夕焼けから生み出された、高品質なグラデーション素材 -Sunset Gradients

Post on:2017年3月8日

デザインやイラストに、個人でも商用でも無料で利用できる、高品質な美しいグラデーション素材を紹介します。グラデーションは夕焼けから作成されており、その美しさはデジタルでもアナログでも堪能できます。 通常は有料素材ですが、今 […]

[CSS]レスポンシブ対応、サイドバーをアニメーションでスライド表示・非表示させるテクニック

Post on:2017年3月8日

レスポンシブ対応、アイコンをクリック・タップすると、サイドバーをアニメーションでスライド表示・非表示させるCSSのテクニックを紹介します。 スライドは単にそう見えるだけで、transformでサイドバーを変形させています […]

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

Post on:2017年3月7日

オリジナルのアイコンを作るシンプルで簡単なデザインテクニックを紹介します。 円や矩形などの基本的な形を組み合わせたり、変形させたりして、さまざまなアイコンを作成します。 作業に慣れてしまえば、どれも1分もかからずにアイコ […]

Webディレクターが役割をしっかり果たさないとプロジェクトが進まない -Webディレクションの新・標準ルール

Post on:2017年3月6日

Web制作の多様化・高度化とともに、ディレクターに求められる知識も多岐に渡ります。しかし、ディレクターは「便利屋」ではありません。 Webディレクターが担う役割、そしてその役割を果たす知識や手段を詳しく解説したオススメの […]

春にぴったり!フォントやテクスチャをかわいい水彩タッチに仕上げる無料素材 -Aquaflow

Post on:2017年3月6日

デザインやイラストに使うフォント、オブジェクト、テクスチャなどを簡単に、かわいい水彩タッチに仕上げる無料素材を紹介します。 Photoshop, Illustrator両対応で、さまざまなデザインで利用できます。 Aqu […]

Flexboxでレイアウトを作成する時に覚えておきたい、子要素がどのようにサイズ変更されるかアニメーションで解説

Post on:2017年3月3日

普通にレイアウトするのであれば、FlexboxでもFloatでもそんなに変わりなく利用できます。Flexboxは、flex(収縮する)の名の通り、収縮してサイズ変更できることが大きな特徴です。 Flexboxを使ってレイ […]

top of page

©2025 coliss