デザインを開発するという視点でお伝えするクリエイティブBLOG
デベロッパーにとって便利なリソースは、制作時の効率化や運用時の手助けをしてくれる重要な存在。そんな中今回は、webサイトを制作するにあたって便利なリソースをまとめた、デベロッパー向け最新リソースまとめ「Fresh Resources for Web Developers – October 2017」を紹介したいと思います。
最新のリソースがいくつか紹介されており、参考にしたいアイテムが集約されていますのでデベロッパー必見のページです。
詳しくは以下
webサイトでよく使用するアイコン。シンプルなものから手の込んだものまで様々なテイストが存在しています。そんな中今回は、キッチングッズに焦点を当てたポップなカラーが可愛らしいキッチンアイコンセット「50 Kitchen Icons」を紹介したいと思います。
生活する中で目にすることの多いキッチンアイテムが50種類のアイコンになったセットです。
詳しくは以下
使いやすさや分かりやすさが重要なWebサイトはデザインだけではなく、一つひとつのアクションにもこだわって作られています。そんな中今回は、ユニークなアニメーションアンダーライン「10 Unique Animated Underline Text Effects with CSS」を紹介したいと思います。
アンダーラインといってもその種類は様々。さまざまなアニメーションパターンがまとめられています。いくつか紹介されている中から気になったものをピックアップしてみました。
詳しくは以下
普段何気なく閲覧しているサイトですが、UIデザインや背景の処理など様々な部分に工夫が凝らされています。そんな中今回は、javascriptで様々なバブル表現が可能なオープンソース「Bubbly Backgrounds: Moving Backgrounds for Your Website」を紹介したいと思います。
様々なバブル背景が簡単な手順で制作することができるようになっています。
詳しくは以下
間も無く発売されるiPhoneX。販売開始を楽しみにしている人は多いのではないでしょうか。そんな中、デザインに携わるデザイナーやデベロッパーはいち早く新機種に対応するため、ディスプレイサイズや構造を知っておく必要があります。今回は、新機種iPhoneXのUIデザインのヒント集「UI Design Tips for iPhoneX」の紹介です。
全面ディスプレイになったiPhoneXは今までとは異なる点がいくつかあります。疑問を解決するためのヒントが紹介されていますのでWebデザイナー必見です。
詳しくは以下
デザインのスキルアップはデザイナーにとって重要な課題。日々技術を上げるため、常にアンテナを貼っている方も多いはず。そんな中今回ご紹介するのは、webサイトデザインに関するPhotoshopチュートリアルをまとめた「50 Tutorials for Designing Website in Photoshop – Ultimate Roundup」です。
Design a Textured Outdoors Website in Photoshop
デザインの参考やスキルアップに使える、WebのUIデザインに関したチュートリアルが、50種類もまとめられています。その中から特に気に入ったものを幾つかピックアップしてご紹介しますので、ご確認下さい。
詳しくは以下
自身の作品やプロフィール、またデザインに関する想いなどを伝えることを目的としたポートフォリオサイトは、特に独立したデザイナーならぜひ制作しておきたいもの。そこで今回紹介するのは、クリエイティブ要素の高いポートフォリオサイトを集めた「20 Creative Examples of Portrait Usage in Web Design」です。
（Future of Web Design London 16th – 18th May 2011 | Home）
人のビジュアルが特化されたデザインを中心に、個性あふれるデザインが多数まとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
Webサイト制作において骨組みとなるデザイン作成や、全体構成の組み立てができずに困ってしまった経験をされた事がある方も多いのではないでしょうか。今回はそんな時に是非活用したい、PhotoshopのWebサイトデザインテンプレート集「20 Beautifully Designed Free PSD Website Template」を紹介したいと思います。
Free Education Website Template – The Best Choice for Students! – Template Monster Blog
高クオリティなデザインテンプレートが揃ってるので、サイトの方向性に合わせて使い分けることができそうです。いくつか気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
「フリーフォント」と検索すると、数え切れないほどのフォントが発信されており、その中からどれを選べば良いのか頭を悩ませるデザイナーも多いのではないでしょうか。そんな中今回は、どんな場面にも使いやすく、且つデザイン性の高いフォントが厳選されている「7 Free Professional Fonts For Your Font Library」をご紹介します。
Illuma Typeface | Hanken Design Co.
無数に溢れるフリーフォントの中から厳選された7種のフォントがピックアップされ、紹介されています。
詳しくは以下
トレンドを抑えたファッション系のwebサイトをデザインするのには、洗練されたセンスとデザイン力が必要です。しかし時には、コストや時間の関係でなかなか思い通りにデザインできないことも。そんなときに活用したい、ファッション系webデザインをWordPressで構築する際に参考にしたいテーマ集「20 Best Fashion WordPress Themes」を紹介したいと思います。
Worldview Theme — WordPress Themes for Blogs at WordPress.com
WordPressを利用してサイト設計を予定されている方におすすめの、ハイセンスで便利なテーマが揃っています。
詳しくは以下
もはやwebデザイン制作に欠かすことのできないアイコン素材。たくさんストックし、いろんなデザインシーンで活用されている方はとても多いと思います。今回はそんなアイコン素材をまとめた「38 Beautiful Icons In PSD For Web Designers」を紹介します。
フラットから立体的、ラフなテイストまで、さまざまな種類のアイコンセットがまとめられています。
詳しくは以下
非常にたくさんのフリーフォントがインターネット上で配布されており、どれを選んでデザインに活用して言ったら良いのか迷うことも多々あるかと思います。今回はそんなシーンにも是非参考にしたいまとめ「20 New Superb Free Fonts For Designers」を紹介したいと思います。
Atomic Dustbin font urban grungy handmade brush typeface
シンプルなものから、個性的なタイプまで、トレンドを抑えた20種のフリーフォントがピックアップされています。
詳しくは以下
植物等の季節感があるテクスチャは、デザイン制作のマストアイテムとしてアーカイブしておきたいもの。そこで今回は、さまざまな種類の枯れ葉や落ち葉テクスチャを集めた「55 Free Design Gripping Dried Leaf Textures」を紹介したいと思います。
（Dry leaves Texture by ~KillerRu on deviantART）
かさかさ良い音が聞こえてきそうなテクスチャから、イメージ性の強いテクスチャまで、さまざまなテクスチャが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
ミステリアスな雰囲気を出したり、食べものを美味しそうにみせたり、写真に加えることでさまざまな効果を出すことの出来る煙や霧のようなスモーク。使い勝手のいい効果なだけに、手軽に使えるスモーク素材があるととても今回はそんなスモークをもっと手軽に取り入れることのできる、高品質なPhotoshopブラシセット「20 Smoke Photoshop Brushesをご紹介します。
Photoshopで写真加工のついでに気軽に使えるハイクオリティなスモークブラシセットです。
詳しくは以下
(続きを読む…)
CSSでメニューもはやWEBデザインの定番の一つになってきましたが、CSSでメニューと一口に言っても、様々な使い方、作り方があります。そこで今回紹介する「7 Advanced CSS Menu, A Great Roundup!!」は様々な実用性の高いCSSで作られたメニューを集めたエントリーです。
画像は 8 web menus you can’t miss
画像をふんだんに使った物から、ぼかし等を効果的に使ったもの、シンプルなツリー型と幅広く様々なジャンルのCSSでデザインされたメニューが7つ厳選されて集められています。
詳しくは以下
テクスチャの色や質感によって、デザインの雰囲気は大きく変化するもの。そんな中今回紹介するのは、キラキラしたゴールドの質感を楽しめるテクスチャセット「30 Free Shiny Gold Textures For Designers」です。
（Metallic Gold Textures by ~Gypsy-Stock on deviantART）
きらびやかに輝くゴールドカラーのテクスチャが30種収録されています。中でも気になったものをいくつかピックアップしましたので、下記より御覧ください。
詳しくは以下
