デザインを開発するという視点でお伝えするクリエイティブBLOG
Web技術は日々めまぐるしく進化しており、一日経てばどこかで新しいものが生まれている世界。忙しい毎日の中で新しいものを追いインプットし続けることはとても大変ですが、そんな時だからこそ是非参考にしたいまとめ「Fresh Resource for Web Developers – April 2017」を今回は紹介したいと思います。
mini.css – Minimal, responsive, style-agnostic CSS framework
役に立つアプリケーションからデザインパターンの参考まで、非常に便利なツールの数々が紹介されています。いくつか気になったものをピックアップいたしましたので、下記よりご覧下さい。
詳しくは以下
webサイトの中で展開されるたくさんのコンテンツメニューをまとめる時に非常に便利なドロップダウンメニューですが、意外と毎回同じようなタイプになってしまうことは多いのではないでしょうか。そこで今回は、機能性の高いドロップダウンメニューの実例をまとめた「30 Stunning Examples of Drop-Down Menu Design」を紹介したいと思います。
（International Storytelling Center）
シンプルなものから、ちょっとのアイデアで非常に見やすく感じられるものまで、種類はさまざま。中でも気になったものをまとめましたので以下よりご覧ください。
詳しくは以下
カントリーテイストや、ハンドメイド感のある優しい雰囲気のデザイン制作に使用することの多いレンガテクスチャですが、国や地域によってカラーやレイアウトなどが異なっており、それぞれを特徴的に楽しむことができます。そんな中今回紹介するのが、手づくりならではの素材感が楽しめるレンガテクスチャをまとめた「20 Handy Brick Texture Collection」です。
FreePhotoTextures.com : Full Resolution Brick Texture Photo #17
シンプルなテクスチャ、カラーやレイアウトがユニークなテクスチャまで、さまざまな種類が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインをより印象的に見せるための手法として、テキストにグラフィック処理をかけるといった方法を取ることもあるかと思いますが、どうやって加工したら良いのか、イメージはあるけれど表現できないといった状況に遭遇することもあるのではないでしょうか？今回はそんな時に参考にしたい、テキストをもっと魅力的に表現できるエフェクト集「25 Insanely Creative Text Effects You Can Use For Free!」を紹介したいと思います。
Neon text effect with two color scheme PSD file | Free Download
テキストに加工を施すことで、デザインをより魅力的に見せてくれるエフェクトが多数紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインと一口に言っても様々なデザイン感があり、求められているデザインや目的に応じて、デザインの感覚を調整し、ふさわしい形で創り上げるのがデザイナーの役目ですが、今回紹介するのはレトロな感覚を演出したい時に便利なレトロ感を演出できるphotoshopブラシを集めたエントリー「30 Free Adobe Photoshop Retro Style Brush Sets」です。
上記の他に、幾何学的なものから、イラストレーションまで、幅広いphotoshopブラシがまとめられていました。今日はその中から幾つか気になったものを紹介したいと思います。
詳しくは以下
商品に施されているパッケージデザインのはさまざまなものがありますが、今回はクリエイティブなグラフィックが魅力のパッケージデザイン「25 Inspirational Package Designs」を紹介したいと思います。
食品や雑貨、プロダクト、化粧品など、いろんな分野のパッケージの優秀なデザインが集められています。
詳しくは以下
WEBはどうしてもその性質上縦に長くなってしまう傾向があり、縦にスクロールして見ていくと言うサイトも多いかと思います。よくユーザーインターフェイスをよくするためにページ下層にTOPに戻るボタンが用意されていて、読み終わった後に一瞬でTOPに戻れる仕組みを取っているサイトも多いのですが、今回紹介するのは常に表示させておくのではなく、スクロール終端で出現するTOPに戻るボタン「jQuery Scroll to Top Control v1.1」です。
ユーザーがページ下部に戻ったときだけ、フェードインで登場し、逆にスクロールで上部に戻ると言った時には消えると言う仕組みになっています。
詳しくは以下
複雑な情報を一目で伝えてくれるアイコンは、デザインに欠かせない存在です。ミニマルデザインやフラットデザインなどシンプルなデザインが流行するにつれ、使用する頻度も増えてきたのではないでしょうか。今回ご紹介するのは、そんなデザインに役立つアイコンを422種類もまとめた「handcrafted & pixel perfect icons.」です。
黒単色で描かれたシンプルなラインアイコン、ベタアイコンが多数取り揃えられています。
詳しくは以下
(さらに…)
webサイトやスマートフォン・タブレット対応のサイト制作をする際に便利なフリーのテンプレート。すでにすべてが完成された状態のため、使用するだけでデザイン性の高いサイトを作り上げることができます。今回はそんなHTML・PSDテンプレート集「20+ Fresh and Free HTML and PSD Templates plus GUI Packs」を紹介したいと思います。
Kuntitled – Free Bootstrap Theme | Pankogut
デザイン性に優れたテンプレートが豊富にまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
アレンジが効き、拡大縮小などの可変にも劣化することなく対応できるフリーベクターデータ。非常に便利な素材で重宝すると思います。そんなチェックしておきたいフリーベクター素材集「30 Free Vectors All Designers Need」を今回は紹介したいと思います。
Web elements vector icons Vector | Free Download
アイコンやテンプレート、パーツなど、さまざまな種類のベクターが展開されています。気になったものをピックアップしましたので下記よりご覧ください。
詳しくは以下
デザイン制作に欠かすことができないフォント。クオリティの良し悪しが左右される程重要な役割を持つ要素の一つであり、なるべく多くのレパートリーをストックしておきたいもの。そんな中今回紹介するのが、印象的なデザインにぴったりな個性派フォントをまとめた「20 Creative Typography Free Fonts 2012」です。
（Pilaca Free Font on the Behance Network）
さまざまなシーンで使用できる個性的なフォントが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
