デザインを開発するという視点でお伝えするクリエイティブBLOG
WEB制作の主流の制作ツールであるAdobe、Fireworks。photoshopとイラストレーターを組み合わせたような制作ツールで、多くの制作者に利用されていますが、今日紹介するのはFireworksで編集できる、iOS6ワイヤーフレーム「Adobe FW template for iOS 6 wireframing」です。
iOSの筐体のフレームデータの他に、タイトルやタブメニュー。ボタン、ローディングなどなど、iOSに必要なデザインパーツが網羅されています。
詳しくは以下
WEBの制作には様々なツールやソフトウェアがありますが、そのなかでも多くのWEBデザイナーが利用している、Fireworks。WEB制作に特化したグラフィックソフトの一つです。今日紹介するのはそんなFireworksで製作された制作データを素材としてダウンロードできる「THE DAILY BUTTON」です。
ボタンに絞って、様々なボタンが公開されています。公開されているものの中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
WEB制作のデザインにおいて非常に便利なFireworks。最小単位が1pxのため、スライス時にもぶれなく正確に素材が制作できたり、その他様々な面でWEB制作が便利になるように作られているソフトウェアのため、多くのWEBクリエイターが手にしていますが、今回紹介するのはそんなFireworksのテクニックやチュートリアルを集めたエントリー「50+ Excellent Adobe Fireworks Tutorials」です。
画像系から、パーツ作りまで様々なチュートリアルが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
軽量で高機能なjavascriptライブラリとして様々なWEBで導入されているjQuery。非常に高機能で様々なエフェクトや動作を実現できますが、今回紹介するのはjQueryで実現する3Dエフェクト集「9 Best jQuery 3D Effect Plugins」です。
jQueryで動作するエフェクトの中でもフリップで動作するものや奥行きのあるシーンを実現するなど様々な3Dエフェクトが収録されています。今回はその中から特に気になったものをいくつかプックアップして紹介したいと思います。
詳しくは以下
Webサイトや紙媒体のデザインをしていると、アイコンが必要になることがよくあります。様々なテイストのアイコンがありますが、今回紹介するのは、ミニマルなテイストに可愛らしさをプラスしたフリーアイコンセット「Try 100 Icons Free」です。
シンプルで使いやすいデザインに、角ばったフォルムでありながらも、柔らかい雰囲気を感じさせてくれるアイコンが100種セットでダウンロードできるようになっています。
詳しくは以下
日本のWebサイトでランディングページは訴求ありきで、広告的な表現が強いものが多いのですが、今回紹介するのはシンプルで洗練されたランディングページテンプレート集「40 Beautiful Landing Page Templates」です。
Marketing – SNIPPER Landing page Powered with Rich Snippets | ThemeForest
プロモーションや、コーポレートサイトに活用出来そうなレイアウトなど、さまざまなシーンを想定したものが紹介されています。中でも気になったものをピックアップしましたので下記よりご覧ください。
伝えたい情報を1Pにまとめた縦長の1ページレイアウト。メニューなどは存在しますが、基本的には上から読んでいくような構成でユーザービリティに優れた簡潔なWEB構成となっています。今回紹介するのはそんな1ページレイアウトの中でもクリエイティブなものを集めた「50 Beautiful One-Page Websites for Inspiration」です。
様々な業種業態の1ページで制作されたWEBページが全部で50集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
豊富にインターネット上で配布されている素材にはいろいろなテイストがあり、制作しているデザインに合わせて選ぶことができるようになっています。そんな中今回紹介するのは、手描きのさまざまなアイコンフォントやUIをダウンロードできる「Hand Drawn Goods」です。
ラフな雰囲気の手描きアイコンフォントがいろいろなテーマで用意されており、それぞれフリーで手に入れることができます。
詳しくは以下
常に新しいタイプが登場し続けるフォント。トレンドを取り入れたデザイン性の高いものを求めて、アンテナを張っている方も多いと思います。そんなハイクオリティなフリーフォントを集めた「22 New Free Fonts for Designers」を今回は紹介します。
シンプルなテイストから、フォント自体がデザインされたものまで、いろいろな種類がまとめられています。
詳しくは以下
WEB2.0系のサービスのようなロゴが簡単に作れるロゴジェネレーターが今回紹介する「Logogenerador.com」です。グラデーションやフォントの感じなど、少しデザインしたなというロゴがテキストを入力するだけで簡単に制作する事が可能です。
現在ジェネレートできるロゴは全部で10種類で単純にグラデーションで制作したものから、ロゴを前において少しデザインを加えたもの等様々なタイプのロゴが制作できます。
詳しくは以下
無数といって良い程多くのバリエーションが展開されているテクスチャ素材は、制作したいデザインのテーマやテイストに合わせ、豊富な種類の中からの選定が可能です。そんな中から今回は、古紙と星のパターンを組み合わせたテクスチャパック「Vintage Star Pattern: Texture Pack」を紹介したいと思います。
ヴィンテージ感のある演出がデザインの幅を広げてくれる、使いやすいテクスチャパックとなっています。
詳しくは以下
少し前にYouTubeの動画欄のレイアウトがかわり、動画の詳細が省略され埋め込みタグが動画下に表示されるようになりました。これはこれで便利なのですが、個人的には右側に表示される従来のタイプになれきっていたので最近違和感を感じていました。今日はそのYouTubeの表示の問題を解決してくれるGreasemonkeyスクリプトを紹介したいと思います。
このスクリプトを用いる事で上記のハイライト部分が省略されなくなります。これで以前のようなレイアウトでYouTubeを利用できます。
スクリプトは「Youtube Videos moreinfo – Userscripts.org」の右サイドバー最上部の「Install this script」をクリックすればインストールが開始されます。標準だとYouTube日本版に対応していないので下記にしたがって設定してください。
1.インストール後ステータスバーにいる猿を右クリックして、「ユーザスクリプトの管理」をクリック
2.「Youtube Videos moreinfo」を選択
3.「ユーザスクリプトを実行するページ」欄の「http://www.youtube.com/watch?*」をクリック
4.ダイアログボックスが出てきますので「*youtube.com/watch?*」へ修正
ものすごくニッチなスクリプトですが、個人的に求めていたものだったので紹介しました。普段からYouTubeを使っていて何となく違和感がある方は使ってみてください。
構成力の高さが問われるシングルページ。見やすさとデザインを兼ね備えたページサンプルを参考にしたいとお思いの方もいらっしゃるのでは？そこで今回紹介するのが、構成が美しいシングルページを集めた「20 Fantabulous Single Page Websites」です。
（Tristan Barlow | Creative Designer | Front-End Developer | Burrito Enthusiast）
文字を中心に構成されたシンプルなシングルページから、コンセプト性の高いシングルページまで、さまざまなデザインが紹介されています。中でも気になったページをピックアップしましたので、下記よりご覧ください。
詳しくは以下
