デザインを開発するという視点でお伝えするクリエイティブ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種類もまとめられています。その中から特に気に入ったものを幾つかピックアップしてご紹介しますので、ご確認下さい。
詳しくは以下
国内でも多くのソーシャルメディアが数多く展開されていて、多くのサイトがFacebookやTwitterなどと連携していますが、今日紹介するのは連携の際に利用できる、ログインやブックマークに使えるソーシャルボタン集「20 Free Social Login and Bookmark Buttons Source Files」です。
Twitter & Facebook Connect Buttons
上記の他にも全部で20種類の素材が公開されていました。いくつか気になったものを下記に紹介したいと思います。
詳しくは以下
高い拡張性の他に、世界中でリリースされている高いクオリティのデザインテーマが魅力の一つでもあるWordpress。今日紹介するのは2010年にリリースされたハイクオリティなwordpressフリーテーマを集めたエントリー「100 Free High Quality WordPress Themes: 2010 Edition」。
ギャラリータイプのものグリッドレイアウト。ブロガー向き、マガジンタイプと様々なハイクオリティなフリーテーマが集められています。今日は今までDesigndevelopで紹介したことが無いテーマを中心にいくつかピックアップして紹介したいと思います。
詳しくは以下
日々、新しいフリーフォントがリリースされてえおりDesignDevelopでも多くの記事をお伝えしてきましたが、今回は最近リリースされた個性的なフリーフォント「20 Fresh New Free Fonts for Designers」を紹介したいと思います。
Free Font Alex Brush by TypeSETit | Font Squirrel
どれも既存の文字から、ひと味加えた個性的なフォントばかり。全部で20ものフォントがまとめられていまたが、その中からいくつか気になったものをピックアップして紹介したいと思います。
8月に開催が迫っている、2016年リオオリンピック。楽しみにされている方も多いかと思います。今回はそんなオリンピック関連のデザインに最適なフリースポーツアイコンまとめ「20+ Sports-Related Freebies to Design for the Olympics」を紹介したいと思います。
100 Sport & Fitness Icons – FREE! by Ferman Aziz – Dribbble
リオオリンピックをイメージさせる豊富な種類のスポーツをテーマとしたアイコンが多数紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
制作する際にグラフィックソフトやレイアウトソフトを使って自分で制作と言うのが普通だと思いますが、WEB上で特定の部品だけ簡単に生成してくれるジェネレーターもあり、場合によってはそちらの方が便利だったりします。
今回紹介する「55+ Extremely Useful Online Generators for Designers」はそんなデザイナーが便利に使えるジェネレーターを集めたエントリーです。様々なジェネレーターが公開されていますが、今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
階層式のメニューは直感的に操作でき、どこに何があるか明確なため、ユーザーにとっても分かりやすくユーザビリティに優れたメニューだと思います。今回紹介する「Cross browser flyout menu」はシンプルでクールなCSS階層メニューのサンプルを公開しています。
上記は公開されているメニューの一つで画像を使用したタイプの階層メニューです。「CSS only fly-out menus」の下部からCSSのサンプルと使用画像をダウンロードできるようになっています。
更にもう一つのメニュー
外へ出かける事なく服や家電、食品に至るまで、何でもネット上で買い物ができる時代。そんな中今回は、ショッピングサイトを運営する中で活躍してくれそうな素材「10 Free Open Source Responsive Pricing Table Designs」の紹介をしたいと思います。
オープンソースのプライステーブルデザインで、10種類ほどまとめられています。気になった素材をピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
Designdevelopをご覧の皆様
明けましておめでとうございます。昨年はDesignDevelopをご利用、ご購読いただき、まことにありがとうございました。「DesignWorks」の派生として始まった、Designdevelopも昨年10月で１周年を迎えることができ、多くのアクセスをいただけるまでになりました。これもご覧いただいている皆様のおかげによるものと思っております。
日々進化していく、デザイン、WEBデザインですが、今年も日々の情報発信を通じて自分自身のスキルアップ、そして皆様に少しでも役にたつものになればと思っています。
昨年中は自分ができる領域の事を中心にお送りしていましたが、今年はDevelopとあるように、自分が踏み込んだ事がない領域にも少しづつ足を踏み込んでいきたいと思っています。また昨年中は海外のベクターデータや素材の紹介が多かったのですが、オリジナルの素材やベクターデータが提供できたらとも思います。
2009年も引き続きDesigndevelopをよろしくお願い申し上げます。
Designdevelop
関連ブログ：DesignWorks
デザイン制作をする際には、さまざまな素材が必要になってきますが、1からすべてを制作していると時間と手間がかかってしまうもの。今回はそんな時に利用したい、インフォグラフィック等のグラフィックデザインに活用できるフリーデータまとめ「Free Infographic Vector Graphics Design Elements」を紹介したいと思います。
Dribbble – Freebie – Vector UI Components by Balraj Chana
さまざまな種類のVector形式の素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
ページ移動が必要なwebページを快適に閲覧してもらうために重宝する素材アイコン。WEBサイトの内容によっては、分かりやすく表現するために多くの種類のアイコンが必要になります。そこで今回紹介するのが、webデザインに必要なアイコンが500個もまとめられたアイコンセット「「500+ web icons pack」です。
上記のとおりシンプルで使いやすいデザインのアイコンセットとなっています。
詳しくは以下
