デザインを開発するという視点でお伝えするクリエイティブBLOG
スマートフォンアプリなどでは、珍しいものではなくなってきた画面を引っ張ってローディングをするインターフェイス。アプリでは実現する方法はいくつかありますが、今日紹介するのは引っ張ってローディングを実現するJavascript「Hook.js」です。
PCではマウスホイールを上に動かすことでローディングするみたいです。PCサイトではあまり使い道が無いかもしれませんが、スマホサイトで何度かユーザーに更新を掛けさせるようなサービスであれば非常に便利なjsだと思います。
詳しくは以下
直感的に利用できるタッチパネルのスマートフォン。操作には独特のアクションを用いる場合があり、タップ、ダブルタップ、ピンチインなどの単純なものから。三本指でスワイプしたり5本指全てを利用したタッチ操作もあります。今日紹介するのは、そんな様々な操作方法があるタッチデバイスの操作説明に使えるジェスチャーアイコンセット「TOUCH GESTURE ICONS」です。
全部で30のジェスチャーアイコンが登録されています。非常に分かりやすくアイコン化されており、利用しやすいものになっています。
詳しくは以下
国内ではiOS，AndroidがスマートフォンのOSとしては一般的で、普通に利用している分には好き嫌い、個人の趣向などによってどちらを選択するかということになりますが、スマートフォンを対象にしている開発者はそういうわけには行かず、やはり両方のプラットフォームに対応した開発が求められることが多いと思います。今日紹介するのは各OSのSDKではなく、クロスプラットフォームのアプリを作るための10のソリューション「10 Solutions for Creating Cross-Platform Mobile Apps」です。
開発者ならよく知るものから、少しマイナーなものまでまとめられています。その中でもスタンダードなもの特に気になったものをピックアップして紹介したいと思います。
詳しくは以下
スマートフォン独自のタッチイベントは多数有り、スワイプ、タッチによるドラッグなど様々なものがありますが、今日紹介するのはスマートフォン向けのイベント簡単に実装できる「QUOjs」です。
このjs一つで、様々なイベントに対応してくれます。現状、対応しているイベントは以下の通りです。
詳しくは以下
WEBプロモーションでももはや書かす事ができない、スマートフォンユーザーへの対策。それぞれの端末の使い勝手に応じた最適化されたデザインが求められますが、その設計はPC向けのWEBサイトとは違う技術が必要です。今日紹介するのはスマートフォンサイトデザインのためのインスピレーション集「Mobile UI Design Patterns: 10+ Sites for Inspiration」です。
スマホサイトのデザインが集約されたサイトが10以上まとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
国内でも徐々に普及してきているスマートフォン。ここ最近ますます、スマートフォン移行が進んでいる感があり、WEB業界でもモバイルサイトやスマホアプリを受託する機会も増えてきていると思います。今回紹介するのは、モバイルサイトやスマホアプリを創るときに便利なGUIキット集「40 New Web, Mobile and Application GUI Kits」です。
このエントリーでは全部で40ものモバイルのデザインのための素材が配布されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
Stencils for Sketching iPhone, iPad & Android
モバイルのWEBサイトワイヤーフレームのための素材、まずは構成を先にというときには便利なキットです。
Android GUI PSD
Androidアプリを制作するときに便利なAndroidのGUIをセットにした素材キット。
iOS 5 GUI PSD
細かな部分が変わったことでも知られるiOS5を再現した素材キット、様々なUIが再現されています。
上記の他にも非常に沢山の素材がまとめらています。スマートフォン関連でWEBサイトやアプリのデザインをされる方は是非。
デザインに欠かせないアイコン。いろいろなテイストのアイコンを揃えておけば、いざという時便利なのはわかっているけれど面倒で…という方におすすめなのが、今回ご紹介するまとめ「Noupe Exclusive: 350+ Free Icons For Our Readers」です。
なんと350点以上ものベクターフリーアイコンのaiデータが一括でダウンロードできる優れもの。テイストもシンプルベースなので使いやすいタイプのアイコンとなっています。
詳しくは以下
WEBデザインというのはかなり複合的なデザインで様々な要素の組み立ててででき上がっています。クオリティの高い、低いはいったいどんな要素で決定しているのか！？そんなWEBデザインの確信にも迫る部分を取り上げているのが今回紹介するWEBデザインの品質をあげるテクニック集「How to Spot Quality within Web Design: Examples & Tips」です。
クオリティを上げるためのテクニックやヒントがいくつか紹介されていますが、そのなかでも特に気になったものをいくつか紹介したいと思います。
詳しくは以下
いろいろな種類が公開されているテクスチャ。デザインのクオリティを高めたい時にも役に立つ、デザイン制作に欠かせない素材ですが、今回はさまざまなジャンルのフリーテクスチャ素材を集めた「100 Useful Free Textures」を紹介したいと思います。
Free High Resolution Textures – Lost and Taken – 8 Colorful Grunge Textures + L&T News!
グランジやメタル、ウッド、布、レンガ、ペーパーなど、使い勝手の良い素材がジャンル別に分類され公開されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
印象的なWebサイトに仕上げるには、印象的な写真を取り入れるのが効果的ですが、思い描いている写真の質感を表現するためには、Photoshopの機能を駆使しなければならないことも。今回はそんな時に便利に活用できる、写真を簡単に印象的に仕上げてくれるPhotoshopアクションのまとめ「45 Amazing and Free Photoshop Actions」です。
Free HDR Photoshop Action – PhotographyPla.net
ヴィンテージテイストを中心に、シーンに合わせて選べるさまざまな加工アクションが用意されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
たくさんの種類が存在するフォント。テイストやデザイン性など、さまざまなタイプが存在していますが、今回紹介するのは、14種のフレッシュなフリーフォント「14 Fresh Free Fonts for Designers」です。
Loew™ – Webfont & Desktop font « MyFonts
デザイン性の高いフリーフォント14種がまとめられており、クオリティの高いデザインを求める際にぴったり。気っっっっっっっっっｑになったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
最近では結婚式やパーティーで必要なアイテムを自分たちで作る人も多いようです。2人の個性や雰囲気に合ったものを手作りで準備するのも一つの醍醐味かもしれません。そんな中今回は、花のモチーフが可愛らしいウェディングイメージのベクター素材「Free Floral Wedding Vector Labels」をご紹介します。
ウェディングアイテムに使える便利なベクターデータです。
詳しくは以下
WordPress3.0より導入された背景画像を選択する機能。テーマの変更よりも気軽に見た目を変更できるのが嬉しいポイントです。今回はそんなWordPressに使える背景画像をまとめた「20 Stunning Background Images To Use In Your WordPress Website, For Free!」を紹介したいと思います。
20 Stunning Background Images To Use In Your WordPress Website, For Free! | Elegant Themes Blog
フラットなデザインを中心にさまざまな柄がまとめられています。どれもディテールが細かく、グランジ感のあるものやグラデーションのきいた美しいものなど、テーマに合わせて選ぶことができそうです。
詳しくは以下
たくさん存在しているテクスチャ素材、作りたいデザインイメージによっていろんな質感のものを所持しておきたいもの。そんな中今回は、粗々しい印象やハードな雰囲気を表現するために是非利用したい、剥がれた素材感を切り取ったさまざまなテクスチャ「20 Peeling Paint Textures」を紹介したいと思います。
（A Desert Sky Stock Solarised Abstract Unpainting by aegiandyad on deviantART）
木や劣化した鉄の盤面など20種類のテクスチャがまとめられています。気になったものをピックアップしましたので下記よりご覧ください。
詳しくは以下
デザインに彩りを添えてくれるパターンはとても便利。その中でも特に模様が綺麗に繋がるように作られた、シームレスなパターンは非常に役立つアイテムです。今回ご紹介するのはそんなシームレスパターンから、手書き風に描かれた素材「Rosalie Watercolor Patterns」です。
水彩筆で書かれたようなラフで柔らかいタッチが特徴の、色合いの美しい全部で18種類のパターンがセットでダウンロードできるようになっています。
詳しくは以下
現在のタスクがどれだけ進行しているかを視覚的に表示してくれるプログレスバー。webサイトの読み込みやダウンロード状況などを知る際には欠かすことができない存在となっています。今回はそんなプログレスバーのフリーで使用できるものを集めた「26 Free Progress Bar Interface PSDs」を紹介したいと思います。
Eye Candy Percentage Bar PSD Freebie | The Finished Box
デザイン演出がされていないことが多いプログレスバーをグラフィカルに表現したpsd素材がまとめられています。
詳しくは以下
