デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBサイトのユーザーインターフェイスの設計は、様々な端末の出現でそれらの端末も意識した設計が必要になってきています。今日紹介するのはブラウザサイズ、端末の解像度に合わせて形を変えるシンプルなレスポンシブナビゲーション「Simple Responsive jQuery Navigation Plugin」です。
こちらはシンプルな作りになっており、デザインなどもされていない、至ってシンプルなものとなっていますので、構造を理解しながら制作を進めることができます。
詳しくは以下
ファッションからインテリアまで、さまざまなシーンで利用されるチェックパターンは、ラインやカラーの微妙な違いで印象が大きく変わるもの。そんな中今回は、さまざまなチェック柄が楽しめるパターン集「Seamless Tartan & Plaid Patterns」を紹介したいと思います。
スコットランドの民族衣装で良く見られるようなタータンチェックを基本にデザインされた、25種類のチェックパターンセットとなっています。
詳しくは以下
デザインのクオリティを高めるためには、奥行きを感じさせるデザイン制作を心がけることが重要です。そんな中今回紹介するのが、手軽にデザインにニュアンスをつけられる、光の表現がきれいなPhotoshopブラシをまとめた「30 Free Dazzling Photoshop Bokeh Brushes」です。
（Bokeh Brushes by ~thethiirdshift on deviantART）
デザインにふわっとした幻想的な雰囲気を演出できるさまざまなブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
画像加工はもちろん、webサイト制作に利用している方も多いPhotoshopは、合成から背景処理まで幅広く利用できる素材を揃えておきたいもの。そこで今回紹介するのが、背景処理に利用しやすいphotoshopパターン集「40 Exclusive Photoshop Patterns」です。
素材感とコントラストの異なるパターンが40種類もセットになって紹介されています。
詳しくは以下
デザイン制作にはさまざまなアイデアと技術が必要になりますが、そんな中でもなるべく制作時間を押さえながら、高いクオリティを追求したいもの。そこで今回紹介するのが、デザイン制作に使いやすいクオリティの高いストライプパターンをまとめた「Collection of High Quality and Free Stripe Patterns for Your Design Projects」です。
Pattern / Let’s Stripe Again :: COLOURlovers
カラフルなパターンから、シンプルなパターンまで、デザインの幅を広げられる素材が豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
女性らしいデザインを手がける際に良く利用される花柄素材。華やかで可愛らしい雰囲気が手軽に演出できるため、幅広いシーンで活躍しています。そんな中今回は、フォント自体に花柄があしらわれたフォント集「30 Free Pretty Designs of Flower Font」を紹介したいと思います。
可愛いらしさを演出できるデザインフォントから、エレガントな雰囲気のフォントまで、さまざまな種類が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
最近のWEBデザインの主流として背景に大きな動画を流すというものがありますが、なかなかイメージに合う動画を撮影するのは難しいものです。今日紹介するのは背景用の動画を探す時に便利な、300以上の背景用フリー動画素材を集めた「Coverr」です。
都会の雑踏から、料理しているシーン、大自然、買い物をしてるシーンなど様々な背景用の動画が無料で配信されています。
詳しくは以下
メニューなどのインターフェイスの仕掛の一つとしてスタンダードな手法ロールオーバー。自分が今、何を触っているのかがすぐに分かるUI向上のためには常識的なものです。今回紹介するのはそんなロールオーバー処理をフェードインで表現するjQueryプラグイン「hoverFade」を紹介したいと思います。
本の少しの違いですが、通常のロールオーバーに比べると作りこんだ感じを受けます。とくにメニュー部分などユーザーの目が触れやすく、常に触る部分への実装はクオリティを高く見せるためにも重要なのではないかなと思います。
詳しくは以下
デザイナーにとってもはや必要不可欠といっても良い程便利な存在となっているフリー素材。非常にさまざまな種類がインターネット上でダウンロードできるようになっています。そんなフリー素材の比較的最新のものをまとめた「「Top 50 Free Resources for Designers from June 2014」」を今回は紹介します。
（Dribbble – Freebie! Starnight HTML5/CSS3 Website Template! by Peter Finlan）
テンプレートやUI、テクスチャやフォントなど、種類豊富に揃っているので、いざという時非常に役立ってくれそうです。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBを制作する上でメニューと並んで書かせないのがボタン。ユーザーが使うものだけにデザインは印象に残りやすく、細かい所ですがサイト全体のクオリティにも影響を与えかねない重要な要素の一つです。今回紹介する「Button Design Showcase」は優れたボタンデザインを紹介していくエントリーです。
いくつものボタンデザインが紹介されていますが、今日はその中からいくつか気になったボタンデザインを紹介したいと思います。
詳しくは以下
■Checkout
反光沢で少し立体感のあるクリアなボタン。
■Tao Effect
周囲が凹んでいるように見える処理を施したボタン
■Clearspring
光沢が効いたボタン。スッキリとしていながらも存在感があります。
■Games for Her by You
アナログ感のあるボタンデザイン。サイトのテイストにもよりますがハマれば効果的なデザインだと思います。
上記の他にも様々なボタンのデザインが紹介されていて参考になります。ボタンのデザインに迷っているWEBデザイナーさんは是非原文もご覧ください。インスピレーションが得られるかもしれません。
webサイトを立ち上げる際に必要な素材の一つ、ファビコン。時には設置を忘れてしまいがちですが、サイト自体の完成度を高めるためにはとても重要な要素だと思います。今回はそんなファビコン用データを簡単に作成できる「Favicon Maker」を紹介します。
サイト内にドラック&ドロップするだけで、さまざまなサイズのファビコン用データを一気に生成してくれるとても便利なwebツールとなっています。
詳しくは以下
アイコン素材は、いろいろなシーンで活躍してくれる非常に便利な存在。たくさん持っているほど表現にバリエーションを持たせることができます。そんな中今回紹介するのは、100種のラインアイコンセット「Iconomous」です。
フラットテイストなデザインにぴったりと合う、シンプルベースのアイコンが100種まとめてダウンロードできるようになっています。
詳しくは以下
WEBデザインをよりリッチにそして作り込んでいる感を与えてくれるドロップシャドウ。ドロップシャドウをつける方法は沢山ありますが、様々なブラウザで同じような見せ方をするためには画像を作成したり、背景が複雑な場合は透過PNGをIEでもよみこませるようにして、背景にしたりと色々と面倒です。今日紹介するのはCSSのみでクロスブラウザに対応したドロップシャドウを作るテクニック「Cross-browser drop shadows using pure CSS」を紹介したいと思います。
上記が、各ブラウザでのドロップシャドウの見せ方のサンプルとなります。色の濃さなど細かなところは違うものの、ほぼ同じような見え方でドロップシャドウを実現しています。
詳しくは以下
フォントはデザインをよりクリエイティブに見せてくれる要素の一つでもあり、デザインの良し悪しを左右するほど重要な役割を担います。そんな中今回は、シーンに合わせて使えるフリーフォントのまとめ「45+ Fresh Truly High Quality Free Fonts for Designers」の紹介です。
Hover Classic Free Font – WILDTYPE
デザインをクリエイティブに飾るフリーフォントがまとめられており、様々なシーンで活用することができそうです。中でも気になったものをピックアップしてみました。
詳しくは以下
Webサイトを閲覧しているとよく見かけるスライダーですが、様々な仕様があり、用途や機能に合わせて構築してく必要があります。そんなシーンで役立ってくれるのが今回紹介する、レスポンシブ対応したフリーWordPressスライダープラグイン「Top 10 Free Responsive WordPress Slider Plugins」です。
Slider by Soliloquy – Responsive Image Slider for WordPress — WordPress Plugins
無料でダウンロードできる10種類のスライダープラグインが揃っています。
詳しくは以下
オフィスやビジネスで使用するツールにはいろいろな種類があり、非常に身近な存在だという方も。webデザインなどをする時にイラスト素材として使用することも少なくありません。そんな中今回紹介するのは、さまざまなオフィスツールのベクターパック「Freebie: Comprehensive Office Environment & Tools Vector Pack」です。
定番のオフィスツールをフラットタイプのベクターイラストでまとめたフリー素材となっています。
詳しくは以下
