デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBのデザインには欠かせないアイコン。シンプルなものでも、いざ制作となるとそれなりに時間を取られてしまいます。今日紹介するのは、無料で利用できるシンプルなアイコン350個セット「350 pixel Perfect Icons」。
上位のように350個ものアイコンがセットとなっており、あらゆる用途が想定されており、cスタンダードなものから、使いどころあるの？といったマニアックなものまで、様々なアイコンが収録されています。
詳しくは以下
ティザーサイトをはじめとして、公開前の期待感をどう作っていくかという部分も近年のWEB制作では求められる部分だと思いますが、今日紹介するのは設定した日時に向けてカウントダウンしてくれるカウントダウンティッカー「How to Code a jQuery Rolodex-Style Countdown Ticker」です。
非常にシンプルな構成と鳴っていて、日、時間、分、秒でカウントダウンを行ってくれます。
詳しくは以下
まだまだ現場レベルではブラウザの問題もあり、なかなかフルでは利用できないCSS3ですが、スマートフォンを中心に徐々に利用されてきています。今日紹介するのはCSS3で実現するテクニック集「15 Thorough & New CSS3 Tutorials」。
Orman Clark’s Vertical Navigation Menu: The CSS3 Version
メニューからプレイヤーなど様々なWEB上で利用できるチュートリアルが公開されています。今日はその中から気になったものをピックアップして紹介したいと思います。
詳しくは以下
軽量で利用しやすく、実務ベースでも多用されるjQuery。今日紹介するのは、最近リリースされたjQueryプラグインを集めた「40 Recently Released jQuery Plugins」です。
機能を問わず、最新のjQueryプラグインがまとめられています。全部で40個のプラグインが集められていますが、今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下から
WEBプロモーションでももはや書かす事ができない、スマートフォンユーザーへの対策。それぞれの端末の使い勝手に応じた最適化されたデザインが求められますが、その設計はPC向けのWEBサイトとは違う技術が必要です。今日紹介するのはスマートフォンサイトデザインのためのインスピレーション集「Mobile UI Design Patterns: 10+ Sites for Inspiration」です。
スマホサイトのデザインが集約されたサイトが10以上まとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
限られたスペースを有効に利用するため、もっと魅力的に写真を見せるためにスライドショーを利用しているという方は非常に覆いと思いますが、今回紹介するのはCSS3で実現するクリエイティブなスライドショー集「CSS3 Image Galleries, Slideshows and Image Effects」。
Sliding Image Panels with CSS3
文字や、写真の動きなど、今までのスライドショーにはなかったギミックやエフェクトがCSS3によって実現されています。いくつかのスライドショーが公開されていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
Fullscreen Background Image Slideshow with CSS3
フルスクリーンで展開するスライドショー。文字などのエフェクトがCSS3っぽいです。
CSS3 Lightbox
シャドウやフェードなど細かい部分にまでこだわったライトボックス。CSS3で処理されています。
CSS3 Loading Animation Loop 2 Set
CSS3で作られたローディングアニメーション。よく見るサークルなどではなくて独特の動きがクリエイティブ感を与えてくれます。
上記の他にも沢山のCSS3テクニックが公開されています。HTML5とCSS3で、なにか面白いものをと企んでいるWEBデザイナーの方は是非原文もご覧ください。
WEBサイトから、パーツまで幅広く制作に利用されているphotoshop。メインで使っている方も多いと思います。今日紹介するのはphotoshopで便利に使えるpsd形式の素材を集めた、WEBデザイナーのためのフリーpsd素材集「80+ Useful PSD Templates For Web Designers」。
上記のようなボタンから、バッジ、アイコン、イラストレーションなど、様々な素材がまとめられています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
イラストで意味を表現するアイコン。種類やテーマには非常にさまざまな種類が存在しており、たくさんストックして状況に合わせ使い分けている方も多いのではないでしょうか？そんな中今回紹介するのは、ライフスタイルやワークスタイルをイメージさせるフリーピクトグラムアイコン「Free Pictogram Icons of Everyday Life」です。
さまざまな現場で働く人達の姿を、ピクトグラムアイコンで表現した50種のセットがダウンロードできるようになっています。
今まで「13,000以上のフリーフォントを集めた「Search Free Fonts」」や「フリーピクセルフォント集「Semplice Pixelfonts」」と様々なフリーフォントサイトを紹介してきましたが、今回紹介する「West Wind Fonts @ typOasis」はシンプルな手書き風な物も公開されていますが、少し変わったフォントをダウンロードできるフォント配布サイトです。
変わった書体は使いどころがなかなか難しい感じですが、デザインにアクセントを与えてくれそうなフォントが色々と公開されています。いくつか気になった書体をピックアップして下記に貼っておきます。
詳しくは以下
企業やショップなどを紹介する常設のサイトと、スペシャルコンテンツ・イベントなど短期間のみ利用するサイトと、webサイトにはまったく主旨の異なる2タイプのジャンルが存在しています。そんな中から今回紹介するのは、イベント告知用に設置された趣向性の強いデザインをまとめた「32 Nice Event Websites」です。
（Full Frontal 2011- JavaScript Conference）
イベント内容を単刀直入に伝えるデザインから、イベントの雰囲気をイメージ的に伝えるデザインまで、さまざまなテイストのwebサイトが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
シャープな感じがする明朝体のフリーフォント「花園フォント」。こちらのフォントは、JIS X 0208:1997の6,355漢字＋1非漢字「仝」の6,356字が収録された漢字のみのフリーフォントです。仮名が無いのでボディコピーなどには使えませんが、メインで漢字を大きく扱うデザインなんかには使えそうな漢字のフォントだと思います。
こちらの制作にはビットマップ形式やアウトライン形式ではなく、スケルトン＋肉付け形式でデータで記述する漢字グリフ（フォント）自動生成エンジンのKAGEシステムを使って作られたと言うものです。
詳しくは以下
デザインの現場では、テクスチャ素材を利用する引き出しが多ければ多いほど、それだけデザインのクオリティも向上するのではないでしょうか？そんな中今回紹介するのは、高解像度の岩石や石のテクスチャをまとめた「Freebies: 15 Ultra Hi-Res Rock Textures」です。
小さな石が集まってできた地層や、自然の壮大さを感じるスケールの大きな石まで、さまざまな石の姿を写しだした高解像度素材が公開されています。
詳しくは以下
高い透明感や透き通った雰囲気が魅力的な水彩。デザインでも人気の高いモチーフですが、アナログで表現しようと思うと思いの他大変なものです。そんな時に参考にしたい、水彩表現をデジタルで可能にしてくれる水彩ブラシセットまとめ「25 Free Watercolor Brush Sets for Skilled Digital Artists」を今回は紹介します。
watercolor brushes – 1 by jmb1 on DeviantArt
アーティスト向けのハイクオリティで使いやすいブラシセットが、25種類紹介されています。更にその中から、おすすめのブラシを幾つかピックアップしてみましたので是非ご覧ください。
詳しくは以下
決まった形式のないwebサイトデザインですが、ユーザーの使いやすさを考えたデザイン制作はとても重要だと思います。そこで今回紹介するのが、フリーのPhotoshopデザインパーツを集めた「33 Useful Photoshop PSD Freebies for the Web」です。
（Clean and Sexy Form Elements ‹ ‹ 365psd365psd）
ボタンデザインやフォームデザインをはじめ、webサイト制作に必須なさまざまなデザインが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
ご報告が遅くなってしまいましたが、DesignDevelopのデザインを今回、大幅にリニューアルいたしました。姉妹ブログサイト・Designworks（http://designwork-s.net/）の新ドメイン移行・デザインリニューアルと共に、より姉妹ブログらしさを演出するために、今回双方ブログのデザインの統一性を図っています。
新デザインのDesignDevelopはドメイン移行は行わず、今と同じ「https://design-develop.net/」となります。簡単ではありますが、新DesignDevelopがどう変わったのか？以下にて簡単に紹介させて頂いておりますので、よろしければご覧ください。
IEのサポートも縮小され、少しづつではありますが、制作の現場もアニメーションやエフェクトに対して積極的になってきました。本日紹介するのはdivもタブもチェックボックスも回転のエフェクトを与えることができる「TURNBOX.js」です。
こちらは様々な要素に対して、回転のエフェクトを与えることが可能となっております。例えばON/OFFのトグルだったり、アップロードだったりダイアログだったり、div自身にも与えることができるため、ページ全体を切り替えるようにした使い方も可能です。
詳しくは以下
