デザインを開発するという視点でお伝えするクリエイティブBLOG
現在では様々な端末がリリースされ、その全てで最適な表示をさせるためにレスポンシブなWEBサイトが求められていますが、端末ごとのチェックはとても面倒なもの。今日紹介するレスポンシブ時代のビューポートチェックWEBサービス「Responsive.is」は、WEB上で様々なビューポートをシュミレートしてくれるものとなっています。
PC、タブレット縦、タブレット横、スマートフォン縦、スマートフォン横と様々なビューポートが確認でき、全体のどの部分を表示しているのかも分かるようになっています。下記は様々なビューポートで同一のサイトを表示したものとなります。
詳しくは以下
WEBサイトで料金について言及するページは、有料で提供するWEBサービスではよく見かけますが、今日紹介するのは、端末を選ばない、レスポンシブな料金テーブル「Responsive Pricing Tables Using」です。
上記のように、こちらは基本4カラムの料金テーブルとなっていて、ウィンドウ幅によって、横幅が縮まったり、組変わったりとレスポンシブなつくりになっています。実際の組み替え例は以下からどうぞ。
詳しきは以下
webサイトの制作をスタートする前には、レイアウトの構築やサイトマップの作成が必須。それをすることで、サイトの全体像を把握しながら計画的にデザインをすることができます。今回はそんな企画時に是非利用したい便利なUIキット「Website Flowcharts」を紹介したいと思います。
いろいろなレイアウトのフォーマットUIイメージが72種揃っており、組み合わせをすることでサイトイメージをふくらませることができます。
詳しくは以下
PCで見るWEBサイトの印象を大きく左右するアクションの一つホバーアクション。主にWEB上のユーザー導線上に配されるものだけに、小さいながらも、このアクションが心地よいかでサイトのクオリティを左右するものですが、今日紹介するのはクリエイティブなホバーアクションを実装できる「Tilt Hover Effects」です。
一般的に色が変わる、透明度が上がる、画像が切り替わるなどといったものでは無く、複数の画像がズレたり、アニメーションが加わったりマウス座標の位置で見た目が変わったりと、多彩なホバーアクションが簡単に実装できるようになっています。
詳しくは以下
タブ型のメニューはページナビゲーションとして取り入れられている方も多いかと思います。今日はWEB2.0っぽい今時のデザイン感のカスタマイズ可能なタブ型のナビゲーションメニュー「Pure Css Horiontal Menus」を紹介したいと思います。
作りは非常に単純で、リストで構成されています。配布は全部で6色こちらの「デモページ」で動作を確認する事が可能です。各メニュー項目はテキストデータなので日本語メニューも自由に作れるようになっています。またリスト形式でマークアップされていますのでタブを増やす事も簡単にできます。
動きに派手さはありませんが、デザインもシンプルで配色もスタンダードな物が揃っていますので、あわせやすいかと思います。配布は各色ごとにzipファイルでダウンロード可能で圧縮ファイルの中には各画像とCSS、メニューだけ表示させてあるHTMLが同封してあります。組み込み方法はHTMLファイルのソースを見て頂ければ簡単にサイトに実装可能だと思います。
webサイトの構成で、サイト全体のデザインにワイドな雰囲気を演出できるシングルページレイアウトは、最近特にさまざまなサイトで多く利用されています。今回はそんなシングルページレイアウトのテンプレートまとめ「PSD Templates: 20 One Page Free Web Templates」を紹介したいと思います。
（Arrow | Free One Page Business Portfolio PSD Template on Behance）
20種類の、デザイン性のあるシングルページが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインに彩りを与えてくれるテクスチャ。そのなかでも素材感があり、様々なデザインに使えるテクスチャの一つ金属。今日はそんな金属のテクスチャを集めたエントリー「50 Free Metal Textures」を紹介したいと思います。
錆びたものから、ひっかいたような跡があるもの、また繋ぎ合わせた物まで、金属と一口に言っても様々なテクスチャがあります。今日は収録されているテクスチャの中からいくつかピックアップして紹介したいと思います。
詳しくは以下
アナログ感のあるデザインは人間味がしてベクターで描かれた、グラフィカルな作品とはまた違った魅力があります。今日紹介する「Creative Doodles Photoshop Brushes」はアナログ感溢れる落書きのようなブラシです。
スキャナで取り込んで、加工してと手書きをデザインに手間がかなりかかりますので、こういったブラシが使えるのであれば上手く使いたいですね。実際収録されているブラシのスクリーンショットを下記に貼り付けておきます。
詳しくは以下
ショップや企業などからお知らせメールを配信する時に、デザインが行き届いたテンプレートを使用すると購読率がアップする確率も高くなります。今回はそんな時に参考にしたい、レスポンシブ対応のフリーテンプレート「30 Free Responsive Email and NewsletterTemplates」を紹介したいと思います。
Creating a Future-Proof Responsive Email Without Media Queries – Tuts+ Web Design Tutorial
ニュースレター配信にデザイン性をもたらすことができるテンプレートが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBデザインをする際、どのような手法で行っているでしょうか？人それぞれだとは思いますが、多くの場合はいきなり作り始めるのではなく、構想をまとめてラフに落とし込む場合が多いとは思います。今回紹介するのはラフを制作するのに便利な手書きで使えるワイヤーフレームテンプレートをまとめたエントリー「10 Free Printable Web Design Wireframing Templates」です。
プリントアウトしてそこに書き込んでいけるような様々なテンプレートが多数集められています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
明るく楽しげな雰囲気を演出するのに最適なレインボーカラーは、カラフルな配色を利用してさまざまなデザインに利用されています。そんな中今回紹介するのが、カラフルポップな雰囲気を演出できるレインボーパターンをまとめた「A Collection of 90+ Vibrant Rainbow Colored Patterns」です。
（Stripidy Patterns by ~danionimvu on deviantART）
さまざま種類のレインボーカラーをテーマにしたパターンが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
紹介するコンテンツやデザインテイストによって、利用したいアイコンのデザインも異なるため、バリエーションとしてより多くのアイコン素材をストックしておきたいもの。そんな中今回は、本をモチーフに制作されたアイコンをまとめた「A Collection of Free Book Icon」を紹介したいと思います。
Font Book by ~Monbcn on deviantART
リアルなテイストのアイコンから、デフォルメが可愛らしいタイプまで、さまざまなアイコンが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
