デザインを開発するという視点でお伝えするクリエイティブBLOG
iPhoneに関わるプロダクトのプレゼンテーションには欠かせないモックアップ。次々と新しいバージョンが出ているにも関わらず、古いモックアップを使用していると、魅力も半減してしまうのではないでしょうか。そんな中今回ご紹介する「40+ Free iPhone 7 / 6S / 6 Mockups & Graphic Design Resources」は、最新機種でまとめられており、プロダクトの魅力を引き上げてくれるモックアップまとめです。
iPhone 7 Case Mockup by Radowan Nakif Rehan – Dribbble
40個ほど、最新機種を中心としたモックアップ素材が揃っています。気になるものをいくつかピックアップしていますので、下記よりご覧下さい。
詳しくは以下
デザインの提案をする際に役に立つのがモックアップ。不確実なものを実際のイメージに近い形で表現しながらデザインを確認できるので、イメージが明確になり、プレゼンテーションの手法としてはとても便利です。今回紹介するのは、レスポンシブデザインをプレゼンテーションするのに便利なモックアップ「15+ Mockups to Showcase Your Responsive Web Designs」です。
Showcase Website Header Mockup | MockupWorld
実際のPCにはめたものワイヤーフレーム上のものなど、様々な段階・用途に合わせて使用できるモックアップまとめられています。今回ははいくつか気になったものをピックアップしましたので以下からご覧ください。
詳しくは以下
ブランドイメージとして様々なシーンに展開されるロゴ。クライアントにデザインを見せる際には、ロゴがどういう風に展開されていくのかを伝えるための手段の一つとしてモックアップに反映されてプレゼンテーションする場合があります。今回はそんな場面で役に立つロゴデザインのモックアップまとめ「20 Free PSD Templates To Mockup Your Logo Designs」をご紹介したいと思います。
Embroidered Logo MockUp | GraphicBurger
全部で20ものバリエーション豊かなモックアップがまとめられておりますが、その中から気になるものをいくつかピックアップ致しましたので下記よりご覧ください。
詳しくは以下
デザインの反映をよりリアルに見せることができるモックアップは、とても重要な役割を果たしてくれます。データ上で見ているだけではイメージしづらいものを形にしてくれる、そんなフリーのモックアップテンプレート集「Free PSD Mockup Templates (30 Fresh Mock-ups)」を今回は紹介します。
Corporate Identity Mockup – free psd on Behance
30種類のさまさまなアイテムのモックアップが集約されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
Webデザインを行う際は、レスポンシブによる見栄えやUI設計への考慮など、さまざまな箇所に気を配らなくてはなりません。UIは日々進化しており、ユーザーが快適な使用ができるようにきちんと追いついていきたいもの。そんな方におすすめの、最新のUIキットなどがまとめられた「12 Freebies & Goodies For Web Designers」を今回は紹介します。
モックアップやWordPressのテンプレート、フォントなどがまとめられています。気になったものをいくつかピックアップしているので、下記よりご覧ください。
詳しくは以下
優れたUIデザインをスピーディ制作することがほとんどの場合望まれますが、中には時間がなくて制作できないことも。そんな時に多種多様のデザインテンプレートが手元にあれば非常に便利です。今回はそんなシーンで参考にしたい、探す手間をなくすことに役立つ最新UIデザインまとめ「New Web & Graphic Design Freebies : 28 Resources」を紹介します。
Free E-Commerce Apps – part 05 by Haxon – Dribbble
アイコンからフォント、モックアップまで幅広くまとめられています。気になったものをいくつかピックアップいたしましたので、下記よりご覧ください。
詳しくは以下
最近ではFLASHはJavascriptだけではなく、CSS3が登場したことにより、CSSでアニメーションを表現するということも徐々に増えてきているのではないでしょうか？今日紹介するのは様々なCSSのアニメーションTIPSを集めた「Guide to CSS Animations」です。
Using CSS3 Transitions, Transforms and Animation
javascriptの代替になってくれるようなものから、Flashのようなリッチなアニメーションまで様々なCSSで実現するアニメーションTIPSが紹介されています。今回はいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
クリスマスシーズンが到来し、街はすでにイルミネーションできらきらと輝いています。今回はそんなクリスマスシーズンをもっと盛り上げてくれるようなフリーデザインリソースまとめ「50 Free Christmas Templates & Resources for Designers」を紹介したいと思います。
Jingle Bells Christmas Vector Elements – Download Free Vector Art, Stock Graphics & Images
テンプレート系から、アイコン、フォント、ベクター素材など、さまざまな種類のフリー素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインの基本設計を示すワイヤーフレームは初期段階での打ち合わせや、提案などでのデザインのすり合わせには欠かせない存在です。今回ご紹介するのはそんなワイヤーフレームを、制作する際に是非活用したいハイクオリティなワイヤーフレームテンプレート「iBlocks – iiOS Wireframe Kit」です。
iBlocks – iOS Wireframe Kit Freebie | Day 61/365 – Project365 by Kishore – Dribbble
スマートフォンのワイヤーフレーム作成時に役立つ、使用頻度の高い基本設計が24種類集められています。
詳しくは以下
(さらに…)
WEBやアプリ上でのボタンはユーザーにとって大きな意味を持ち、非常に重要な要素。一目でボタンだとわかるようなつくりであることはもちろんのこと、遊び心あるエフェクトはユーザーの目を楽しませます。今回はそういったボタンを探している方におすすめ、最新CSS3ボタンのまとめ「50 CSS3 Button Tutorials For Designers [2017]」をご紹介します。
すべてにデモがついているので、その場でどんな動きをするのかを確認することが可能。50種類もあるボタンの中でも気になったものをいくつかピックアップしていますので、下記よりご覧下さい。
詳しくは以下
企業のシンボルや、ブランディング、プロモーションなどに使用されるロゴには、個性が求められるシーンもしばしばあるかと思います。今回はそんな時に是非参考にしたい、Illustratorで作るロゴデザインチュートリアル「40 Tutorials for Outstanding Text Effects in Illustrator」を紹介したいと思います。
（Create a Mummy Text Effect In Illustrator | Vectips）
Illustratorの機能を駆使し制作されたハイクオリティなロゴデザインが、チュートリアルと共に多数紹介されています。中でも特に注目したロゴをピックアップしましたので、下記よりご覧ください。
詳しくは以下
人間から生み出されるイメージやグラフィックとはまた違った魅力がある、コンピュータなどで計算式を可視化する手法。今回紹介するのはそんなコンピュータによって幾何学的に描き出したイメージをテクスチャとして利用できる素材セット「Seven Free Fractal Wireframe Images」です。
細かい線によって描き出された図はどれも美しく、個性的です。またそれぞれ一定の特徴性を持っていて、ランダムのようにも感じるけれども、その中に確かな法則性があることも感じさせます。
今回紹介する「WP-AddQuicktag」はWordPressで記事を書くときにかなり便利なプラグイン。このプラグインを使うと投稿画面に任意のQuicktagを追加できるようになり、よく使う処理や、定型文を登録しておけば間違いなく記事を書く労力は削減されます。
1.「WP-AddQuicktag 」からプラグインをダウンロード(.txtになっているのでリネームしてください)
2.「wp-addquicktag.php」を「wp-content/plugins/」へアップロード
3.管理画面からプラグインを有効化
AddQuicktagタグの設定タグは以下の通り
Buttontext：ボタンに表示するテキスト
Start tag(s)：開始タグの中身
End tag(s)：終了タグの中身(空要素タグの場合は空白)
タグセットを作るもよし、定型文を作っておくも良しと色々な使い方ができるプラグインだと思いますので、頻繁に更新する方は押さえておいても損は無いかと思います。
webデザインを手がける際に必要となる要素の一つ「カラーリング」。メインとなる背景部分などは、デザインの雰囲気を左右する重要な部分でもあるため、色選びには特に慎重になるのではないでしょうか。そんな中今回は、パープルを使用したwebデザイン事例「Examples of Purple in Web Design」を紹介したいと思います。
（tapmates）
落ち着いた・大人っぽい印象のパープルを上手く使い、洗練されたwebサイトを創り上げています。中でも特に気になった事例をピックアップしましたので、以下よりご覧ください。
詳しくは以下
デザインのワンポイントやアクセント、注目度をアップさせたい場合に良く利用されるシールやバッヂ風のアイコン。デザイン性の高い作品に使用する場合は特に一つ一つのパーツにも作り込みが必要になり、クオリティを追求するには時間がかかります。そんな中今回紹介するのが、デザインのアクセントにぴったりなフリーバッヂアイコンパック「6 Free Stylish Web Badges」です。
カラーや雰囲気の異なるバッヂが6種類パックになった、さまざまなシーンで利用しやすいバッヂアイコンとなっています。
詳しくは以下
WEBサイトのなかでも最も重要で、ユーザーが利用するナビゲーション、グローバルナビゲーション。今日紹介するのはそんなグローバルナビゲーションのショーケース「A Showcase of Website Navigations with Serious Click Appeal」です。
海外のサイトにはなりますが、様々なナビゲーションが集められています。今日はその中から気になったものをいくつか紹介したいと思います。
詳しくは以下
