海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ

海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。 この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。 コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー

移り変わりのとても速いウェブデザインの世界では、どのようなデザインや実装テクニックが人気トレンドとなっているのか、定期的にチェックしておくことが重要です。今回は、クリエイティブなアイデアの参考にしたい最新ウェブデザインをまとめてご紹介します。 コンテンツを最大限うまく引き出し、ユーザーの印象に残るデザインを演出する最先端ウェブテクニックを体感してみましょう。各サムネイルをクリックすることで、参考ページを確認することができます。 詳細は以下から。 新しいウェブデザインの魅せ方を提案する、参考にしたいサイトまとめ Pharrell Williams ファレル・ウィリアムズの世界観を表現した公式ページ。グリッド上に並べられたサムネイルをクリックすると、豊富な情報を多彩なレイアウトでまとめています。 Heyblend 美しい配色とシンプルなレイアウト、書体の組み合わせはぜひ参考にしたいミニマルデザ

海外サイトPetapixelで公開された「Understanding Basic Aesthetics in Photography」の著者Sebastian Jacobitzより許可をもらい、日本語抄訳しています。 スマートフォンやデジタル一眼レフカメラなどの人気によって、これまで以上に誰でも気軽に写真を撮影できるようになりました。しかし、その場の雰囲気までうまく切り取った写真を撮影するのはむずかしい、と感じるひとも多いのではないでしょうか。今回は、SNSでシェアするときにも活用できる、写真をうまく撮影できる4つの大事なポイントをご紹介します。 すぐに実践できるシンプルなテクニックで、これだけのテクニックを押さえているだけでも、より効率的で、美しい構図をあまり悩まずに撮影できるようになります。 詳細は以下から。 写真を撮影するとき覚えておきたい、基本の構図テクニック リーディング・ライン

ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク

クリエイティブなプロデザイナーが実践する、デザインテクニックを身につけるチュートリアルやつくり方をまとめています。 豊富すぎるツールは Illustrator ビギナーにとって、戸惑うことも多いでしょう。そんなときは順番ごとにデザインを進める、実践的なチュートリアルを参考に、基本的なツールを学んでみましょう。テクニックが増えていくことで、Illustrator をより自在に操作することができるでしょう。 詳細は以下から。 Illustrator をしっかり学びたいひとへ。参考にしたい入門チュートリアル、つくり方まとめ 夏をテーマにしたカラフルなアイコンを作成する方法 ペンツールを使ってデザインする、シンプルでかわいいアイコンパックのつくり方。 惑星アイコンのつくり方 銀河系の惑星をひとつずつ、色鮮やかな配色のフラットスタイルで描いたアイコン素材セット。 ゲームに出てくるファンタジーな武器を

デザインのキャリアをはじめるとき、良いアプローチのひとつとして基本デザイン原則を学び、そしてそれらをうまく使い、きちんとした土台を今後のプロジェクトのために作ってみましょう。 Image Source: Jared Granger 制作を通じてノウハウを知ることで、より多くのテクニックを学び、自分の予想を超えた良いアイデアを作成できるようになるでしょう。プロのデザイナーから学ぶことは、ウェブデザインのスキルを改善するのにもっとも最適な方法といえます。今回は、ウェブデザインを改善する15個のテクニックを見ていきましょう。 詳細は以下から。 01. 憧れのデザイナーを追いかけよう。 デザイナーによって好みのデザインレイアウトやエフェクト、コンポーネントは違うもので、それらを真似してみましょう。すごいと言われるアーティストでさえも、最初はここからはじめています。まずは通らないわけにはいかないでし

CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※　デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※　ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe

写真を魅力的に加工することもできるPhotoshopですが、大量にある機能からうまく仕上げるのには時間とコツが必要です。もし、大量の写真を加工する場合はどうでしょう。アクション素材を利用すれば、繰り返し行う作業を大幅に短縮してくれます。 アクション素材は、再生ボタンひとつクリックするだけで、あらかじめ登録しておいた一連の作業を自動で行ってくれ、効率的にデザインを進めることができます。今回は、サイト制作に活用したい時短アクションから、プロ級の写真処理を行うことができるフリー素材をまとめてご紹介します。 詳細は以下から。 ワンクリックで写真処理を完成！優良Photoshopアクションまとめ アクション素材がどの写真加工にも適しているわけではありません。風景画やポートレイト写真の得意なアクションや、よりグラフィックを強調した素材などさまざまです。目的に合ったアイテムを探してみましょう。 アクショ

海外デザインブログ Medium で公開された「Desining in Color」の著者より許可をもらい、日本語抄訳しています。 配色は、デザイナーにとって強力なツールです。注目を集めたり、感情をゆさぶったり、メッセージを伝えることもできます。配色がどれほど重要なのか分かりやすく伝えるために、よく引用されるThe Impact of Color on Marketing では、いくつかの商品において、90%以上のユーザーが配色によって購入を決めているということも、研究によって分かってきています。 効果的に配色を活用することが、デザインにおいて重要になりますが、新しい色の組み合わせを考えるのも大変です。それぞれの色には意味があり、組み合わせは無限と言えるでしょう。 この記事は、デザインに合った配色カラーパレットのつくり方の紹介ガイドです。より多くの色をつかって、直感的に素敵な色の組み合わせ

日本中の書体デザイナーさんの努力によって、素敵な日本語フリーフォントが数多く公開されるようになったいま、複数の書体をインストールしているひとも多いでしょう。しかしデザインのとき、いつも同じ書体ばかり使ってしまう、という人もいませんか？ 公開されているフォントの数が増えたことで、どれも利用してよいか悩んでしまうこともしばしば。特に、デザインコンセプトにあった、商用利用にも対応できる素材を探すのは、時間のかかる作業のひとつかもしれません。 今回は、無料ダウンロード可能で、商用ライセンスにも対応した日本語フリーフォントという条件で、幅広いデザインに利用できる、万能アイテムのみをまとめてご紹介します。

HTMLとCSSを中心にデザインされた、注目を集めたいときにぴったりな最新ボタンエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 CSS3が主要なモダンブラウザに対応したことから、アニメーションを加えたり、スタイリングの幅がグッと広がっています。加速するウェブデザインの進化において、これからますます楽しみな分野で、他と差の出るテクニックと言えるでしょう。 詳細は以下から。 コピペでラクラク、押したくなるボタン用HTMLコードスニペットまとめ ※　デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※　ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Fancy Button CSSのみでホバーエフェクト用ドロップシャドウとして適用した、今年のデザイントレン

フォトショップの新しい使い方や、テクニックを学びたいときはチュートリアルのつくり方を参考にしてみましょう。ステップごとに進めることができるので、実践的なツールの使い方を学ぶことができます。 今回はデザイナーが参考にしたい、最新 Photoshop チュートリアルをまとめてご紹介します。デモ用 PSD ファイルを無料ダウンロードできる素材もあるので、これからフォトショップをはじめるひとにもオススメです。 詳細は以下から。 これどうやって作るの？フォトショップの勉強で参考にしたい、チュートリアルつくり方まとめ 80年代レトロテキストのつくり方 Illustrator で作成した3Dシェイプ（Photoshopでも作成できます）に、レイヤースタイルを適用する手軽なテクニック。背景のつくり方もポイントで、参考PSDファイルも無料ダウンロードできます。 幻想的な多重露光エフェクトのつくり方 ポートレ

デザインに利用するフォント書体によって、雰囲気や仕上がりはがらりと変わってきます。しかし、目的にあったフォントを見つけるのに、困ってしまうこともしばしば。今回は、どんなデザインにも合わせやすく、使いやすいフリーフォント素材をまとめました。 スタイル数の豊富な書体はもちろん、デザインを選ばずに利用できる万能アイテムを中心に揃えており、多くの素材は商用利用にも対応しています。お気に入りの書体を見つけて、コレクションに追加してみてはいかがでしょう。 詳細は以下から。 商用OK多数！使いやすい万能フリーフォント最新コレクション 2016年5月度 なごみ極細ゴシックフォント 今回特に注目のアイテムで、モダンで直線的な漢字のデザイン。そして、それとは対照的に懐が狭くオールドスタイルなかな文字のデザイン。2つの特徴が見事に生かされています。 ※　個人、商用利用可能 Muller Narrow やや縦長の

Flexbox は、もともとウェブサイトやモバイルアプリのUIをデザインするために最適化された CSS です。 Flexbox のさまざまなプロパティを利用することで、これまでは CSS のみで難しかったレイアウトや配置を実現できるようになりました。またスクリーンサイズに応じてレイアウトが変化する、レスポンシブデザインとの相性もよい点もポイントです。 この記事では、よくあるCSSによるレイアウトの問題5つを、Flexbox　で解決できるテクニックを見ていきましょう。動作確認用のデモページと一緒に、実際にこれらのテクニックを適用した実践サンプル例もまとめています。 目次 対応ブラウザ環境は？ 高さの揃ったサイドバーを作成する方法 要素の表示順番を変更する方法。 どんな要素も天地中央揃えにする方法 レスポンシブに対応する、グリッドレイアウトを作成する方法 フッター要素を常に固定する方法 対応ブ

ウェブサイトのデザインが決まらないときは、PhotoshopやSketchで編集できる、UIコンポーネントやPSDテンプレートを活用してみましょう。アイデアを形にしやすくし、写真や文字テキストを編集するだけ手軽にデザインを完成させることができます。 今回は、2016年のデザイントレンドを盛り込んだ、無料ダウンロードできる UI コンポーネントや PSD テンプレート素材をまとめてご紹介します。本格的にデザインをはじめる前のモックアップやワイヤーフレームとしても活用できるアイテムを中心に揃えています。 詳細は以下から。 Web制作スピードをアップする、無料UIコンポーネント、PSDレイアウト素材まとめ Chat UI Kit ミニマルなレイアウトに、カラフルな配色を活用したUIコンポーネントは、Photoshop と Sketch 用ファイルがそれぞれ用意されています。 Carbon Mat

ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。 今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。 Waves ３つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現していま

どんなデザインにおいても、ただしいフォント選びが成功の鍵となります。見た目だけでなく、読みやすさも考えながら、フォントの組み合わせを考えるのに悩んでしまうこともしばしばです。 フォントの組み合わせについては、これまでにもいくつか（1/２/３）の記事を紹介していますが、今回は、Google Web フォントを利用した、実用的でデザインも美しいサンプル例をまとめています。 目次 Google フォントとは？ Google フォントの実装方法 実用で使える、Google フォントの組み合わせ　パート１ 実用で使える、Google フォントの組み合わせ　パート2 Google Web フォントを見つけやすくする Font Library Google 謹製、日本語 Web フォント「Noto Sans Japanese」 Google Font とは? 通常、ブラウザで表示できるフォントは、ユーザ

2016年も３分の１が過ぎ、今年を代表するウェブデザイントレンドがはっきりと見えてきました。Studio by UXPin で公開されている無料Eブック「The Complete 2016 Web Design Trends Bundle」では、2016年のトレンドを10個のポイントに分けて、具体的なウェブサイトと一緒にまとめています。 今回は、デザイントレンド10個のポイントのみを、簡単にまとめてご紹介します。より詳しい内容に関しては、無料ダウンロードできるEブックで確認できます。TwitterやFacebook、Googleなどの大企業を中心とした、参考サンプル45サイトが掲載されています。 詳細は以下から。 01. マイクロインタラクション Microinteraction マイクロインタラクションは、モバイルアプリのデザインにおいて、大きなアニメーションに比べ、ユーザーがあまり考え

ブラウザやウェブサイト体験が進化したことで、さまざまなアニメーションを実装したウェブサイトや、モバイルアプリへの注目が集まっています。今回は「気持ちの良い動き」がポイントとなった、最新UIデザインをまとめてご紹介します。 余白スペースをたっぷり利用したミニマルなレイアウトから、アニメーションを加えることでよりユーザーの注目を集めるナビメニューや、ユーザーインターフェースを中心に揃えています。なかなか言葉で説明しにくい遷移フローが分かりやすく説明できるので、うまくクライアントの要望に応えることができるかもしれません。 詳細は以下から。 最先端ウェブデザインを体感する！アニメーションが美しいUIデザインまとめ Cima is Live 筆ブラシでペイントしたようなエフェクトを、各ページやコンテンツに活かした、さわやかな配色も素敵なウェブサイト用UIデザイン。 Birds of Paradise