デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBを制作する際のフローとして、まずは手書きでワイヤーフレームを設計してそれらを固めてから、実制作に移るという方は多いのではないでしょうか？今日紹介するのは、手書きのワイヤーフレームからHTMLに自動変換してくれるMicrosoft「Sketch 2 Code」です。
こちらは、2018年8月に公開されたもので、現在はailab/Sketch2Code at master · Microsoft/ailab · GitHubにて公開されています。開発者インタビューや実際の利用シーンがまとめられた動画が公開されていましたので以下からご覧ください。
動画は以下から
最近のWEBデザインの主流の一つレスポンシブデザイン。端末の解像度に応じて、その端末に最適化したデザインを提供してくれるものですが、慣れていないとなかなか一から構築となると難しいものです。今日紹介するのはシンプルなベースフレームで明快にレスポンシブデザインが実装できるフレームワーク「BASE」です。
こちらは「Super Simple Responsive Framework」とある通り、至ってシンプルなもので、テキストリンク、リスト、テーブルなどなど、基本要素のみで構築されています。
詳しくは以下
デザインに質感を与えてくれるphotoshopブラシ。photoshopで作り込んで行く時には非常にありがたく便利な物です。今回紹介するのは高解像度の木目photoshopブラシ「15 Weathered Wood Photoshop Brushes」です。
全部で15種類の木目のブラシが収録されていて、木目の種類も様々なものが収録されています。ブラシは名前の通り、少し質感のあるものが収録されています。
詳しくは以下
最近ではクラウドコンピューティングを用いたシステムを利用して、いつでもどこでも仕事ができる体勢を整えている方も多く、そのようなサービスを提供しているサイトも少なくありません。そんな中今回は、クラウドサービスアイコンを制作する際のヒントとなる、表現力の高いクラウドアイコンをまとめた「50+ beautiful cloud icons」を紹介したいと思います。
Dribbble – weather icons by matt yow
シンプルなクラウドマークをはじめ、デザイン性の高いアイコンが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
誰しもが気になる情報コンテンツの一つが天気予報。多くの方が毎日チェックするものですが、コンテンツを作る立場にとっては、それぞれの天気をいかに直感的に分かりやすく、見せてあげるのかが、頭を悩ませるところだと思いますが、今日紹介するのは天気予報のためのシンプルなアイコンセット「Free Weather Icons」です。
晴れ、くもり、雨というシンプルなものから、竜巻や風速計などすこし変わったものまで様々なものが収録されています。
詳しくは以下
コンタクトフォームはサイトとユーザーを繋ぐための大切なもの、こだわりを持ってWEBを作るのであれば、コンタクトフォームにもこだわっていきたいところです。そこで今回紹介するのはAjaxで動作する小粋なフリーのコンタクトフォームを集めた「16 Free Ajax Contact Forms – For A Better User Experience」と言うエントリー。
シンプル目な物から字数カウント、アニメーションなどAjaxを活かしたフォームが全部で16個紹介されています。今日はその中から個人的に気にあったコンタクトフォームをいくつか紹介したいと思います。
詳しくは以下
WEB上で買い物を楽しめるサイトはもはや当たり前の存在で、Amazon、楽天など大手を初めとして、個人、WEBにお店を展開しているという方は多いかと思います。
現在ではレンタルカートやオープンソース系のシステムでは素晴らしいテンプレートが揃ってデザインするのも手軽にはなっていますが、もっとこだわりたいと言う方のために、今日紹介するのは海外の素晴らしいEコマースのWEBサイトデザインを50集めたエントリー「50 Inspirational E-Commerce Website Designs | Vandelay Website Design」を紹介したいと思います。かなりの数が紹介されていますが、今日はその中から気になったデザインをピックアップして紹介したいと思います。
詳しくは以下
WEBデザインの仕上げに欠かせないのがアニメーション。ポイントやユーザーの誘導まで幅広い役割をこなす重要な工程です。今回ご紹介するのはWEBデザインに使えるWordPress用のアニメーションプラグインを集めたまとめ「10 Free Plugins for Adding Animation Effects to WordPress」です。
シンプルなものからアクセントにぴったりな凝ったエフェクトまで、多数のWordPressプラグインが揃います。以下ではまとめの中からおすすめのアニメーションプラグインを3つご紹介します。
詳しくは以下
ヘルシー志向が高まり、健康を意識した生活を送る方が増える中で、デザインでもそんな方をターゲットとした制作をするシーンが増えてきていると思います。今回はそんな場面に最適な素材、健康的なライフスタイルを表現できるフリーアイコンセット「40 Free Health and Fitness Icons」を紹介したいと思います。
かわいらしいテイストで、ヘルシーな暮らし、またフィットネスを取り入れた暮らしを表現することができます。
詳しくは以下
Instagramにお気に入りの場所やおしゃれなカフェ、見た目も可愛いスイーツなど様々な写真を投稿している人は多いのではないでしょうか。最近では”フォトジェニック”から”ストーリージェニック”に変わりつつあるようで、動画の投稿が注目されています。そんな中今回は、Instagramのストーリー投稿に活用出来るテンプレート「12 Instagram Story Templates」の紹介です。
動画投稿もおしゃれにしたいという思いを叶えてくれるテンプレートのセットです。
詳しくは以下
様々なシーンで活用できるアイコン素材はいくつ手元にあっても困ることはありません。今回紹介するのは、環境をテーマにしたフリーで使える50種類のエコロジーアイコン「50 Free Ecology Icons (Linear, Flat, Outlined)」です。
Webサイトやグラフィックデザインどちらでも使えるベクターデータのアイコン素材です。
詳しくは以下
サイトに設置するボタンの中でも最もユーザーに的確にそして分かりやすく制作しなければいけないボタンの一つカートに入れるボタン。今日紹介するのはそんなカートに入れるボタンを集めたエントリー「80 Examples of Add to Cart Buttons for Design Inspiration」です。
全部で80ものカートに入れるボタンが紹介されています。今日はその中からいくつかきになったものを紹介したいと思います。
詳しくは以下
