デザインを開発するという視点でお伝えするクリエイティブBLOG
シンプルなwebサイトももちろん魅力的ですが、独特な動きを取り入れることでもっと見栄えの良いサイトに仕上げることができるのではないでしょうか？今回はそんな時に利用したいjQueryプラグイン「A Cool Collection Of jQuery Plugins To Make Your Website More User Friendly」を紹介したいと思います。
ちょっとしたさりげない動きから、メインとなる部分に取り入れられる演出まで、いろいろなタイプのjQueryプラグインが紹介されています。
詳しくは以下
複数のテーマ選択を1デザインで行うのに便利なツール・タブ。シンプルな切り替えが定番ですが、今回はさまざまな動きのタブデザイン表現を可能にする「11 Free CSS & jQuery Tabs Plugin And Tutorials」を紹介したいと思います。
タブに独自の動きを再現することができるプラグイン、そして構築のためのチュートリアルが公開されています。
詳しくは以下
webサイトをより魅力的に見せるためには、デザイン性はもちろんですが、意外性のある動きなどを取り入れることで実現することも。今回はそんなサイトの動きに魅力を与える、フリーjQuery&CSS3ホバーエフェクトまとめ「A Wonderful Collection Of Free jQuery & CSS3 Image Hover Effects」を紹介したいと思います。
Direction-Aware Hover with CSS3 and jQuery
さまざまな種類のエフェクトが豊富に紹介されており、サイト自体にどこか物足りなさを感じていた方におすすめのまとめとなっています。
詳しくは以下
webサイトを構築する際に、印象的に、サイトを魅力的に見せてくれるjQueryは非常に便利なツール。よく利用されている方はとても多いのではないでしょうか？今回はそんなjQueryプラグインをフリーで使用できる「14 Free Frontend jQuery Plugins」を紹介したいと思います。
fullPage.js One Page Scroll Site Plugin
14種の、独特な動きを見せるjQueryプラグインが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
自身の制作した作品や、撮影した写真などをweb上で公開する際にポートフォリオサイトを利用されることが多いと思います。そんな時に役立つ、ポートフォリオサイトに利用したいツールまとめ「21 free tools for perfecting your portfolio」を今回は紹介したいと思います。
（Hatch | AlienWP | Professional WordPress Themes）
作品をより見やすく、クリエイティブに見せることができるツールがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
魅力的なwebサイトを実現させるためには、他にはないデザインや動きを取り入れることで、より理想に近づけることができます。今回はそんな魅力的な動きを実装できるフリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」を紹介したいと思います。
（Drop）
そのまま利用しても、自分のデザインと組み合わせて使っても、クリエイティブなwebサイトを作り出せるプラグインがまとめられています。
詳しくは以下
WEBを制作する際のフローとして、まずは手書きでワイヤーフレームを設計してそれらを固めてから、実制作に移るという方は多いのではないでしょうか？今日紹介するのは、手書きのワイヤーフレームからHTMLに自動変換してくれるMicrosoft「Sketch 2 Code」です。
こちらは、2018年8月に公開されたもので、現在はailab/Sketch2Code at master · Microsoft/ailab · GitHubにて公開されています。開発者インタビューや実際の利用シーンがまとめられた動画が公開されていましたので以下からご覧ください。
動画は以下から
シンプルなデザインが好まれることも増え、他サイトとの差別化の難しさを感じることもあるのではないでしょうか？そこで今回紹介するのが、シンプルな中でも色の使い方によって、印象的に見えるwebサイトを集めた「Minimal and Contrasty Color Schemes in Web Design」です。
差し色としてビビットなカラーを利用したサイトから、2色を効果的に利用したサイトまで、印象的なサイトが多数紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインをする際に使用する素材の中でも、特に活躍の場が多いアイコン。種類豊富に持っていると、非常に便利なもの。そんな中今回紹介するのは、多くのデザインシーンで活躍してくれるフリーフォントまとめ「20 Awesome Free Icon Fonts to Use in Your Designs」です。
Dribbble – Icons V.3 – Free Download by Hüseyin Yilmaz
いろいろなテーマのアイコンセットが20種紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
テキストをただ平打したり並べて配置するだけでなく、グラフィカルな加工を施すことでよりデザインが魅力的に見えてくることも。そんな中今回紹介するのは、さまざまなテイストのテキストチュートリアルをまとめた「New Text Effects Tutorials 2015」です。
Create 3D Star Light Text Effect in Photoshop – PSD Vault
テキストを、リアルかつデザイン的に表現できるチュートリアルが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
国内でもipad2が発売されて、ipadを活用する気運も再び高まっている業界もあると思いますが、今回紹介するのは、ipadアプリをデザインするためのテンプレートやワイヤーフレームを集めたエントリー「GUI Stencils, Wireframing Kits and Sketching Templates for iPad App Designers」です。
iPad GUI Design Template Version 2 (PSD)
プレゼン用、本番用のデザイン用様々な形のテンプレート&ワイヤーフレームが集められています。今日はその中から幾つか下記になったものをピックアップして紹介したいと思います。
詳しくは以下
一昔前までは、MOやフロッピーディスクといったメディアを利用してデータのやり取りをすることが多かったですが、今ではほとんどのデータがインターネット上でやり取りされており、毎日何かしらのデータをパソコン内にダウンロードをしているという方も多いはず。そんな中今回紹介するのが、表現力の高いダウンロードアイコンをまとめた「A Showcase of Free and Pleasing Download Icon」です。
Coarse Green Download Folder Icon, PNG ClipArt Image | IconBug.com
立体感のあるアイコンから、ポップな雰囲気のアイコンまで、さまざまなアイコンが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
サイト内を検索する時に使用するサーチボックス。基本シンプルなデザインで配置されることが多いですが、今回はデザイン的に表現したい時に参考にしたい、実用的なPhotoshopサーチボックスをまとめた「36 Useful Search Box Designs In Photoshop Format」を紹介します。
Search Field PSD Collection – Free PSD Files
いろいろなタイプのデザインで構成されたサーチボックスが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
カーソルを合わせるとぴょんと飛び出すツールチップ。以前「javascript不要のCSSで制御するツールチップ「Easy CSS Tooltip」」や「半透明・角丸のツールチップを表示するJavaScript 「CoolTips」」といくつかDesigndevelopでも紹介してきましたが、今日紹介するのはそんなツールチップのスクリプトを集めたエントリー「30+ Tooltips Scripts」です。
主にJavaScript, Ajax、CSSを使って実現しています。沢山のToolTipsが紹介されていますが、今日はその中から気になったToolTipsが公開されていますので下記に貼り付けておきます。
詳しくは以下
書体はデザイナーにとっては非常に重要なもので、常に新しい、刺激的なフォントがないかと探し求めているというひとも多いはず。今日紹介するのはデザイナーのための10のフリーフォントを集めたエントリー「10 New Free Fonts for Your Designs」です。
シンプルでキレイ目でクリエイティブなフォントが全部で10個集められていました。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
