デザインを開発するという視点でお伝えするクリエイティブBLOG
ITunesを初めとして、Appleの製品には幅広く利用されているユーザーインターフェイス、CoverFlow（カバーフロー）直感的かつグラフィカルなのが特徴的ですが、今回紹介する「ProtoFlow」はprototype.js＆script.aculo.usを用いてそのカバーフローを実現するという物です。
まずはデモページをご覧ください。スライドバーでも画像をクリックでも画像を動かすことができるようになっていて、画像のキャプションも表示される見たいです。
詳しくは以下
派手なアクションや演出はありませんが、WEBサイト構築において、ちょっとした気の利いた所を押さえているjavascriptが今回紹介するJavaScript「yuga.js」です。
簡単に導入できる上に「jQuery」を使って様々な事が簡単なコードで実現可能です。優雅なWeb制作のためのJS サンプルと銘打っているだけあって実相もシンプルでわかりやすいJavaScriptになっています。
詳しくは以下
ブログと言う言葉もかなり定着してきて、個人でも多くの人がブログを持っていて、何かしらの形で利用しているかと思います。名前の通りログを残していくという概念ですので、ブログには日付表示が必ずと言っていいほどあるかと思います。今日紹介するのはブログの日付表示のデザインを集めたデザイン集「Gallery Of Date Stamps And Calendars」です。
単純に参考画像として乗っているだけではなく日付アイコンやカレンダーアイコンのPSDの素材が用意されていて、さらにチュートリアルまで公開しています。
詳しくは以下
CSSで実現するメニューは今や一つの定番になってきていますが、なかなか一から組むとなると、初心者には厳しく面倒な物です。今回紹介する「woork: Elegant navigation bar using CSS」は簡単にカスタマイズが可能なCSSメニューテンプレートです。
HTMLとCSSソース共に公開されていて、そちらを利用して自分のサイトの内容に打ち変えてあげれば簡単に自分のWEB仕様にカスタマイズすることができます。
詳しくは以下
国内ではWordPressを凌いで確固たる地位を気づき上げているCMS、Movabletype。ブログをMovabletypeで作られている方も多いのでは無いでしょうか？今日紹介する「Movable Love」はMovabletypeに特化したデザインショーケースです。
CSSやWEBサイトのデザインショーケースは数多く存在するかと思いますが、Movabletypeに絞ったというのはなかなか珍しいですね。
詳しくは以下
前回「プレビューしながらテキストのCSSスタイルを簡単に設定できる「CSS Type Set」」という記事でお伝えした。プレビューしながらテキストのCSSスタイルを設定できるWEBサービス「CSS Type Set」を紹介しましたが、今回紹介するのはこれの日本語版に当たる「CSS Type Set 勝手に日本語版」というものです。
本家の「CSS Type Set」もそこまで難解な物ではありませんが、どうしても英語が苦手、英語のサービスは使う気になれないという方はこちらで試してください。完全に日本語化されています。
詳しくは以下
説明要素の多いECサイトのデザイン。より分かりやすく使いやすくすることが、購入者を増やすための方法でもあります。今回はそんなシーンに最適なアイコンセット集「20+ Free E-Commerce Icon Sets to Download」を紹介したいと思います。
Exclusive Freebie : 36 e-Commerce Icons from DryIcons.com | BytesWire
フリーで利用できる、いろいろなデザインテイスト・いろいろな種類のアイコンが揃っています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBデザインにおいては非常に使える素材、アイコン。様々なアイコンが制作され、フリーアイコンもかなりの数、種類が世界中でリリースされていますが、今日紹介するのはシンプルなピクトグラム&シンボルフリーアイコン集「25 Free Pictogram and Symbols Sign Icon Sets」です。
DEFAULT iCON
License:Creative Commons Attribution-No Derivative Works 3.0
どんなWEBデザインでも使える汎用性の高いアイコンセットが全部で25セット紹介されています、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
画像ビューワーのように画像を拡大して表示するという機能をjavascriptで実現しているのが今回紹介する「shiftzoom.js」です。下記のよう現在拡大されているのが全体の何処の部分なのか、表示することも可能です。
上記の拡大して見せると言う基本動作の他に様々なオプションが用意されていて、画像をフェードさせたり、ズームのタイミングを指定できたりと細かいところまで配慮されていますので、画像をメインに扱うサイトでは重宝しそうなスクリプトです。
詳しくは以下
個人でWEBサイトを制作する方も増えていますが、専用のデザインソフトがなく、なかなか思い通りのサイトを作れないとお悩みの方も多いのではないでしょうか？そんな中今回紹介するのが、サイト制作にそのまま使える、デザイン性の高いWordPressテーマをまとめた「26 New Freebie WordPress Themes Released in 2012」です。
Classic Photography Theme for WordPress | Vandelay Design Blog
シンプルなテーマから個性を表現できるテーマまで、さまざまなWordPressテーマが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
前回「ロゴデザインのリソースサイト集「105+ Logo Design Tuts And Resources」」という記事でロゴデザインのためのインスピレーションサイトを紹介しましたが、今回もロゴデザインのリソースとなりうるサイトを集めた「Top 10 Sources of Logo Design Inspiration」と言うエントリーを紹介したいと思います。
以前紹介したWEBサイトと、一部被るサイトもありますが、今回は前回紹介していないものをピックアップして紹介したいと思います。
詳しくは以下
デザイン制作シーンで欠かせない存在となっているPhotoshopブラシは、さまざまなコンセプトのものが発表されており、実際のデザイン制作に利用している方は多いのではないでしょうか？そんな中から今回は、Photoshopで利用できる鳥のブラシセットをまとめた「30 Cool Bird Brush Sets for Photoshop」を紹介したいと思います。
Bird Brushset by ~paranoidstock on deviantART
さまざまな種類の鳥が表現できるブラシ素材が多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
最近は様々なライブラリが展開されていて、WEBの開発にも大きな影響を与えていますが、今日紹介する「Coda Slider Effect」もそんなライブラリの一つjQueryを使ったタブメニュー+エフェクトです。
「Coda Slider Effect」は非常に滑らかに動くスライダーエフェクトを実現するためのもので、上記のようなよく見るタブメニューにひと味違った動きを付加させてくれます。
詳しくは以下
古い紙の質感をデザインソフトで再現するのは難しく、試行錯誤しているという方もいらっしゃるのではないでしょうか？そこで今回紹介するのが、レトロな質感を表現できるペーパーテクスチャまとめ「23 Free High Quality Old Paper Photoshop Textures」です。
Old Paper Photoshop Brush Set by ~gojol23 on deviantART
古い洋書の一ページから、グランジ感のあるペーパーまで、さまざまなテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
プログラムを組むと一言で言っても、内容は幅広く、多くの知識と技術が必要不可欠です。そんな中今回紹介するのは、時間短縮できる無料のツールをまとめた「Best of 2016: 100 Free HTML/CSS Themes」です。
できるだけ短時間でウェブサイト制作が必要とされる場合や、手順のかかるプログラムを素早くこなしたい時に役立つツールが、数多く紹介されていますのでご覧ください。
詳しくは以下
全部だったり、一部だったりと何かとデザインに使うことが多い世界地図。ベクターデータで持っているとちょっと使いたい時に便利です。今日紹介する「Free Vector World Maps Collection」は世界地図のベクターデータが集められたエントリーです。
面だけだったり、線画だったりドットで作られていたりと様々な世界地図が集められています。ここまでバリエーションがあれば、制作しているデザインに応じて使い分けることもできるので便利ですね。公開されている物の中から、いくつか下記に貼り付けておきます。
詳しくは以下
