デザインを開発するという視点でお伝えするクリエイティブBLOG
Webサイトの修正において、細かいものであればHTMLやCSSのみで対応してしまうことがあると思います。もちろんデザインを事前に作る事は重要だと思いますが、時にはプログラムのみで解決できてしまう手軽さも必要なのではないでしょうか。今回紹介するのはそんな手軽さをより強く感じさせてくれる、アイコンフォントのまとめ「15 Useful Free Icon Fonts for Designers」です。
通常、HTMLに「A」と記述すれば「A」と表示されますが、アイコンフォントを使用すれば対応するアイコンが表示される仕組みとなっています。どれも扱いやすいものばかりですが、中でも気になったものをピックアップしましたので、下記よりご覧ください。
Some Random Dude — Iconic is Becoming Awesomer
ファイル関連を中心に、さまざまな種類のアイコンを収録したフォント。スタンダートな見た目なので使うシーンを選びませんね。
Maki | A clean point of interest icon set from MapBox | MapBox
スポーツ関連など、Webとはあまり関係のないものが収録されたアイコンフォント。リアルと結びついたデザインに使えそうです。
Modern Pictograms – The Design Office
ポップ調のアイコンが集められたフォント。子ども向けのデザインによく合いそうです。
利便性からすると、全てアイコンセット内で解決する事ができるのであれば、アイコンフォントを利用するという選択肢もありそうです。
普段であれば、装飾の多く入ったフォントは扱いにくく、敬遠されることも多いと思います。しかしクリスマスなど、テーマが明確なイベントであれば、そういったフォントはとても効果的にイメージを伝えることができるのではないでしょうか。今回紹介するのはそんなフォントの中でも、クリスマスフォント向けに厳選された「20 Handpicked Christmas Fonts and Typography Examples」です。
クリスマスをテーマにさまざまなデコレーションが施されたフォントが20種紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
季節はもうすぐクリスマス。ちょうどクリスマスイベント向けのデザインを制作しているという方もいらっしゃるのではないでしょうか。今回は流行のフラットデザインで作られたクリスマスの可愛いアイコンセットのまとめてみました。
Flat Christmas Icon Set – DryIcons
白抜きの主張しすぎないものからカラフルなわくわくするものまで、さまざまなシーンで使えるアイコンが揃っています。
Flat Christmas Icon Set (PSD) | Psdblast
フラットデザインを取り入れながらも、ポップな仕上がりのアイコン。クリスマスの楽しさを効果的に伝えられそうです。
16 Colorful Flat Christmas Icons ~ Icons on Creative Market
斜めの影をプラスしたロングシャドーのアイコン。単調になりすぎないので、デザインにアクセントを与えてくれます。
Flat Christmas Iconset (14 icons) | Christmas Webmaster
とてもシンプルなのでデザインバランスを崩すことなく、クリスマスを演出することができるのではないでしょうか。
フラットデザインはシンプルさ故に淡白になりがちですが、今回のアイコンを活用すれば、ひと味違った華やかなデザインに仕上げることができそうですね。
シンプルで細身な素材を多用することによってデザインをシャープに、エレガントに見せることができますが、フォントについても同様で。今回はそんな時のために是非ストックしてほしい、細身のフォントを集めた「20 Most Stylish Thin Fonts」を紹介したいと思います。
どのフォントも細身で繊細なものばかり。中でも気になったものをピックアップしましたので、下記よりご覧ください。
Webデザインのように閲覧環境が限定されるプロダクトであっても、質感を高めることによってデザインに深みを与えてていくことができます。今回紹介するのはそんな質感を手軽に高めることができる、クリエイティブなスクエアパターンを集めたエントリー「30+ Creative Square Patterns To Inspire You」です。
Pattern / 5 Stones :: COLOURlovers
カラフルなテクスチャや手作りの暖かみを感じられるものなど、多数のパターンが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
細かなデザインパーツの作成には時間が掛かってしまうので、自身で作成したものを使い回したり、フリーのものをストックしたり、さまざま対処されていると思います。今回紹介するのはそんな時に是非利用して頂きたい、フリーアイコンセット「GICONS」です。
一般的によく使われるアイコンを中心に100種類以上を収録。PNGの画像データの他に制作データとなるPSDも収録されているので、素材としての使い勝手も良さそうです。
グラフィック・webデザイン制作に非常に役に立つpad素材はいくつあっても嬉しいもの。そこで今回はクオリティを重視したpsd素材まとめ「50 Useful and High Quality Free PSD Files」を紹介したいと思います。
（Android Icon Templates by ~bharathp666 on deviantART）
さまざまな種類のpsd素材が収録されており、デザインのテイストに合わせてさまざまな使い方ができそうです。気になったものをいくつかピックアップしてみましたので、下記よりご覧ください。
アクションスクリプト3.0が導入されて、さらに敷居が高くなったと周囲で噂のFLASHですが、今回紹介するのは様々なFLASHの処理やアクションをビデオでまなべるチュートリアルサイト「gotoAndLearn()」です。
かなり高解像度の動画で一つ一つ丁寧に詳細なビデオによるチュートリアルを閲覧することができます。英語サイトになりますので、音声による解説は日本語ではありませんが、かなり詳細な動画のため言葉のカベがあってもなんとかなる感じです。
詳しくは以下
自信のこれまでの作品やアートワークを、多くの人に見てもらう為に作成するポートフォリオサイト。作品はもちろん、サイト自体のデザイン性やクリエイティブ性も、センスを問われる重要な要素の一つです。そこで今回は、ポートフォリオサイト制作の参考となりそうなwebサイトまとめ「30 Portfolios to Inspire You」を紹介したいと思います。
素材や色使いへの配慮が行き届いたポートフォリオサイトが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインの背景素材などに利用されるパターン素材。種類やデザインが非常に豊富で、ジャンル問わずストックされている方も多いのではないでしょうか？そんな中今回紹介するのは、高品質・高解像度のタイル状パターンセット「Free New Set of Material Design Patterns」です。
独自のカラー配色がとても印象的な、タイル状パターンがセットでダウンロードできるようになっています。
詳しくは以下
カラーリングによって印象が異なるウェブデザインですが、作品を目立たせることを目的としたポートフォリオサイトや、クールな雰囲気にまとめたい時のサイトデザインにおすすめしたい「35+ Fresh Showcase of The Dark Side of Web Design」を今回は紹介したいと思います。
135design | web design e programmazione | Roma
ブラックやグレー系のダークトーンカラーうを貴重としたサイトが収録されており、その中でもさまざまなテイストのデザインバリエーションが展開されています。気になったものをいくつかピックアップしましたので、下記よりどうぞ。
プレゼンテーションの際にWebデザインの画像を見せるより、実際にブラウザに表示されている状態を見せた方が、デザインの魅力が伝わるのではないでしょうか。そんな時に持っていると便利な最新のブラウザモックアップのまとめ「10 Free Web Browser Mockups」を、今回は紹介していきたいと思います。
Minimal Browser Template 4K on Behance
クリエイティブ業界に関わらず、これから行う仕事内容に対してクライアントから深い理解を得ることは非常に大切なことです。その際、モックアップはとても優秀な働きをしてくれるのでぜひチェックしてみてください。
詳しくは以下
デザインにもう一つ質感を加えるときに、一つの手として、写真を古びた雰囲気に加工して、世界観を演出したり、現実味をなくしたりしますが、今回紹介するのはそんな補正を一瞬でかなえてくれる、ヴィンテージ&レトロな雰囲気をワンクリックで加工するphotoshopアクション集「40+ Vintage and Retro Photoshop Actions」です。
photoshop actions – 139 (8 actions)
ヴィンテージ、レトロといっても様々な表現があり、明るめのものから単色によったもの、色あせたものなどのアクションがまとめられています。今日はその中から幾つか紹介したいと思います。
詳しくは以下
情報をわかりやすく整理して、視覚的に見せてくれるアイコンはデザインのキーアイテム。積極的にデザインに取り入れていきたいもの。今回ご紹介するのは、そんなアイコン好きの貴方におすすめな化学や科学をテーマにしたアイコンセット「104 Free, Radical Science Icons」です。
104 Free, Radical Science Icons
ちょっぴりマニアックなテーマですが、塾や学校など教育関係のデザインなどで活躍してくれそうです。
詳しくは以下
(さらに…)
webサイト内を操作中のエラーや、説明が必要な項目が発生した時に出現する通知は、利用ユーザーにとってはとてもありがたいもの。今回は効果的にユーザーに通知ができるjQuery Notification Plugin「8 jQuery Notification Plugins For Good User Experience」を紹介したいと思います。
akquinet/jquery-toastmessage-plugin @ GitHub
シンプルながらも、出現の仕方やデザインなどに個性が見えるプラグインが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザイナーにとって必要不可欠といっても過言ではないフリー素材。種類もテーマもいろいろなタイプのものが配布されています。そんな中今回紹介するのは、デザイナーがチェックしておきたい最新のフリーリソース「50 Free Resources for Web Designers from July 2015」です。
Dribbble – Material Design Widgets Ui Kit – PSD by Elad Izak
モックアップからアイコン、フォント、UIなど、多彩な種類のフリー素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
