デザインを開発するという視点でお伝えするクリエイティブBLOG
webサイトのデザインをクライアントに提案する時には、PCだけでなくスマートフォンや他の端末ではどのように表示されるか、全て見せるということも少なくないもの。そんな時に役に立つのが今回紹介する、レスポンシブした際のスクリーンショットが一度に撮れるサイト「Responsive Screenshots」です。
URLを入力するだけで、一度に複数の端末のスクリーンショットうを撮ってくれる優れもの。デザイナー必見のサイトです。
詳しくは以下
デザインにラフな質感をプラスするために、選ぶフォントを手書き風のものにすることで効果が高まることも。今回はそんな質感を手軽に表現できる、チョークで書いたようなラフな質感が特徴のフォント集「20+ Awesome Chalk Fonts to Download」を紹介したいと思います。
Sketch College Font | dafont.com
厳選された、さまざまな質感の手書きフォントが紹介されており、どれも実際に使ってみたくなるものばかりが集められています。
詳しくは以下
スマートフォン向けUIデザインや、PC・タブレット向けのWebデザイン、また名刺やポスターなど、世界にはさまざまな種類のデザインがあります。今回はデザインのイメージを掴みたい時に活用できるベースモックアップ集「9 Free PSDs for Showcasing your Design Work」を紹介したいと思います。
10 Super Useful Free Flat UI Kits | Freebies
デザインの分野を超えた、さまざまなバリエーションが用意されています。今回はその中でも気になったものをピックアップしたので、下記よりご覧ください。
Responsive Showcase Psd Vol2 | Psd Web Elements | Pixeden
PC、タブレット、スマートフォン全てを対応するレスポンシブWebデザインのモックアップ。デザイン制作の他に、コーディングにも参考になりますね 。
Letterpress Business Cards MockUp | GraphicBurger
拘った名刺デザインのモックアップ。紙を変えたり、文字を打ち直したり、さまざまに見せ方を変えることができます。
Poster Frame PSD MockUp | GraphicBurger
ポスターの使用イメージを作成する時に便利なモックアップ。画を差し替えるだけで簡単にイメージを見せることができます。
PSDで用意されているので改変がとても楽で、便利です。クライアントにイメージを見せたい時に、また実物の雰囲気を見せられる、便利なモックアップ集となっています。
フラットテイストなデザインが主流の中、アイコン素材もそれに合わせたさまざまな種類が展開されています。今回はそんな最新のフラットアイコンまとめ23種「23 Free and Flat Icon Sets for September 2014」を紹介したいと思います。
Free Vector File – 50 Autumn Inspired Icons | The Creative Portfolio of Nick Botner
いろいろなデザインシーンで活用できるフラットアイコンが多数まとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
シャープな感じがする明朝体のフリーフォント「花園フォント」。こちらのフォントは、JIS X 0208:1997の6,355漢字＋1非漢字「仝」の6,356字が収録された漢字のみのフリーフォントです。仮名が無いのでボディコピーなどには使えませんが、メインで漢字を大きく扱うデザインなんかには使えそうな漢字のフォントだと思います。
こちらの制作にはビットマップ形式やアウトライン形式ではなく、スケルトン＋肉付け形式でデータで記述する漢字グリフ（フォント）自動生成エンジンのKAGEシステムを使って作られたと言うものです。
詳しくは以下
クリエイティブワークに欠かせないテクスチャ素材は、デザインに奥行きや質感をプラスするための重要なエッセンスとなります。今回はそんなテクスチャ素材の中から、無機質な雰囲気を感じさせるコンクリートテクスチャセット「7 Free High-Quality Concrete Wall Textures」を紹介したいと思います。
カラーや自然のグランジ感などの異なるテクスチャが7種類セットになっています。
詳しくは以下
グラフィカルなマップを作成するためには、さまざまな素材を制作する技術が必要。さらに時間や手間もかなりかかってしまうため、どうしてもコストがかかってしまいがちです。今回はそんな時に便利に活用できるマップ素材サイト「Isometric city maps builder」を紹介したいと思います。
非常にハイクオリティなマップを作成できる、さまざまなパーツ素材が揃っています。
詳しくは以下
CSS3で利用できるようになったFlexbox。WEBアプリやレスポンシブを想定して開発されたものですが、まだまだ現場ではそれほど普及していないのが現状です。今日紹介するのはそんなFlexboxを理解・利用するための様々なUIを簡単に利用できるCSSのFlexbox UIパターン集「Flexbox Patterns」です。
「Flexbox Patterns」は利用しやすくなるようにそれぞれのユーザーインターフェイス毎に、簡単な解説と、CSSとHTMLがセットでコピーできるようになっており、コピー＆ペーストで利用できるようになっています。
詳しくは以下
絵の具を使って描き出す水彩画。デザインに取り入れる際に自身で描いて素材にしても良いのですが、描くことに自身がない・思い通りの素材が描けないといったシーンも存在するのではないでしょうか？そんなときに活用したい、水彩・手描きのベクターをセットにしたフリー素材「AquaWay Free Vector Pack」を今回は紹介したいと思います。
手描きイラストベクターと水彩描写が、それぞれ数種セットでダウンロードできるようになっています。
詳しくは以下
さまざまなテイストのアイコンがインターネット上では配布されており、デザイナーのデザインイメージにあったものを、フリーで取り入れられるものも多く存在します。そんな中今回紹介するのは、黒い縁取りラインがポイントのポップなフリーアイコン「100 Lulu Vector Icons」です。
100種の、くっきり・はっきりとしたビジュアルが特徴のアイコンセットがフリーダウンロードできるようになっています。
詳しくは以下
ブログを書いていると多用するのがコピー&ペースト。ショートカットも簡単で、これといって負担になる作業ではないのですが、今日紹介するFirefox拡張機能は文字列を選択しただけでクリップボードにコピーしてくれるfirefox拡張機能「AutoCopy」です。
通常コピーまでは行程的に文字列を選択して、ショートカットを押してという2段階になっていますが、この拡張機能を導入すれば一工程減らして、コピーをすることができます。
詳しくは以下
