WEBの表現をもっと豊かにしてくれるアニメーションまとめ「36 Brilliant User Interface Animations」
TOP > WebDesign > WEBの表現をもっと豊かにしてくれるアニメーションまとめ「36 Brilliant User Interface Animations」 WEB上のユーザーインターフェイスの中で行われるちょっとしたアニメーションに驚きと感動をするということがたまにありますが、インターフェイスに即したアニメーションはWEBをより良いものにしてくれます。今日紹介するのはWEBの表現をもっと豊かにしてくれるアニメーションまとめ「36 Brilliant User Interface Animations」です。 Menu open / tick / close 全部で36ものアニメーションが原文ではまとめられていましたが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Sendingmail メールのアイコンが変形して紙飛
物を売るために参考になるWEBデザイン集
ECサイトからプロダクトランディングページまで物を売るためには様々なページが必要ですが、その中から決済画面、プライスページ、プロダクトページ、ストアページと大きくカテゴライズしてデザインを収集している、物を売るために参考になるWEBデザイン集を今回紹介したいと思います。 それぞれのカテゴリに特化して、デザインが集められており、スクリーンショットもフッターまでで取得しているため、サイト上でも全てを参照することが可能です。 詳しくは以下 カテゴリー内で上記のように大きくサイトを次々と見ていくことも可能ですが、カードタイプのレイアウトにして一覧でデザインを見ていく事も可能です。 Checkout Pages 海外のデザインが中心となりますが、かなりの数のデザインが集められています。珍しいカテゴライズですが、ECサイトやサービスサイトを作りたいという方は見たい部分が集約されているのでかなり重宝する
モックアップを画像をアップロードするだけで制作してくれる「Smartmockups」
WEBデザインを生業として行う上で、単純にデザインしたものを見せるだけでは無く、時には実際にスマートフォンやPCに表示されている画像を見せてイメージを膨らませていただく作業をしたということもあると思います。今日紹介するのはそんなモックアップを画像をアップロードするだけで制作してくれる「Smartmockups」です。 デスクトップからスマートフォン、タブレットなど様々なモック写真が公開されており、それらを簡単に利用することが可能です。 試しにDesigndevelopのスクリーンショットで試してみましたので以下からご覧ください。 詳しくは以下 アップロード後に写真範囲が選択でき、生成後はサイズを指定してダウンロードすることができます。手慣れた人であればモックアップ制作もほんのすこしの手間ですが、画像を探して合成してというのは熟練者でも時間がないときには面倒なもの。 プレゼンテーションや制作
種類豊富に揃うフリーアイコンセットがまとめられた「1100+ Free UI Icons for Web, iOS and Android UX Design」
種類豊富に揃うフリーアイコンセットがまとめられた「1100+ Free UI Icons for Web, iOS and Android UX Design」 アイコンは同じテーマやテイストでセットになって配布されていることが多く、シリーズで統一性をもたせられるのも嬉しいところ。そんな中今回紹介するのは、種類豊富に揃うフリーアイコンセットがまとめられた「1100+ Free UI Icons for Web, iOS and Android UX Design」です。 Image Editing Icons – EpicPxls freebie 非常に多彩なテーマのアイコンセットがフリーでダウンロードできるようになっています。気になったものをピックアップしましたので、下記より御覧ください。 詳しくは以下 School Icon Set – EpicPxls freebie 学校などで使用
デザイン性の高いフリーテンプレート集「20 Beautiful & Free Resume Templates for Designers」
TOP > Design > デザイン性の高いフリーテンプレート集「20 Beautiful & Free Resume Templates for Designers」 制作したデザインが実際に使用されている時の状態を確認したい、また提案時などにデザインをより魅力的に見せたい、そんなシーンはとても多いと思います。そんな中今回紹介するのは、紙媒体のデザインを手がけている方にとっては特に嬉しい、デザイン性の高いフリーテンプレート集「20 Beautiful & Free Resume Templates for Designers」です。 Free Minimalistic And Clean Resume Template – CreativeBooster ポスターや名刺、チラシ、冊子などのイメージテンプレート、いろいろな種類がピックアップされています。気になったものをまずは以下
アプリアイコンを手軽かつハイクオリティに仕上げることができるジェネレーター「App Icon Generator」
TOP > Tool > アプリアイコンを手軽かつハイクオリティに仕上げることができるジェネレーター「App Icon Generator」 スマートフォンアプリなどのアイコンは、UIの中で目に留まる・またデザイン的に魅力的で分かりやすくすることがとても重要。いつもデザインに苦戦されているというデザイナーの方は少なくないのではないでしょうか？そんな中今回紹介するのは、アプリアイコンを手軽かつハイクオリティに仕上げることができるジェネレーター「App Icon Generator」です。 用意されたベースを組み合わせていくことで、簡単にデザイン性のあるアプリアイコンを作り上げることができます。 詳しくは以下 ベースとなるフレームワークは、立体タイプとフラットタイプが用意されており、さらにデザインの背景テクスチャ16種ラインナップ。組み合わせの仕方によっていろいろなイメージを作り上げる
さまざまな種類のワイヤーフレームを集めたサイト「UI Tiles」
デザイン設計時にワイヤーフレームを使って構成を確認・設計することで、完成までのイメージを頭に想像できるとともに、進行・作業をスムーズに行うことが可能となります。今回はそんな設計時に利用したい、さまざまな種類のワイヤーフレームを集めたサイト「UI Tiles」を紹介したいと思います。 シンプルなテイストのワイヤーフレームが多数まとめられており、設計するサイトに合わせ選択し活用することができそうです。 詳しくは以下 ランディングページやブログ、フォト・ビデオのギャラリーページ、カレンダー、チャット、プロフィールなど、種類が豊富。aiやPhotoshopデータといった形式があるので、使うメディアによって使い分けも可能。ベースがシンプルなので、いろいろなデザインに応用できるのも嬉しいところ。 個人・商用ともに利用可能とのこと。企画書への添付はもちろん、イメージ作成などにも場合によっては利用できるか
web開発・構築時に参考にしたい最新ツールまとめ「Fresh Toolbox for Web Developers – August 2015」
TOP > Design > web開発・構築時に参考にしたい最新ツールまとめ「Fresh Toolbox for Web Developers – August 2015」 webサイトを構築するのにはさまざまな機能を盛り込むこともあり、一から開発を行っているとどうしても時間やコストがかかってしまうもの。今回はそんな時参考にしたい、最新ツールまとめ「Fresh Toolbox for Web Developers – August 2015」を紹介したいと思います。 gridstack.js jqueryプラグインや、その他便利なリソースが紹介されています。気になったものをピックアップしましたので、以下よりご覧ください。 詳しくは以下 Crayon.css さまざまな色合いのカラーをCSSで表現できます。塗りを重視したデザインをCSSで構築したい時に。カラーが豊富なのも魅力的です
アプリの設計・イメージデザインに使用したい フリーベクター素材まとめ「30 Free App Vectors You Should Use In Your Designs」
アプリの設計・イメージデザインに使用したい フリーベクター素材まとめ「30 Free App Vectors You Should Use In Your Designs」 スマートフォンアプリのデザイン設計シーンは非常に多く、デザインイメージを作り上げることが必要とされる場合もあるのではないでしょうか？今回はそんな時に便利に利用できる、フリーベクター素材まとめ「30 Free App Vectors You Should Use In Your Designs」を紹介したいと思います。 Touch screen technology vector 似たテイストでまとめた、アプリ設計・イメージデザインで活躍してくれるベクター素材が多数紹介されています。 詳しくは以下 Smartphone apps collection さまざまなページデザインがラインナップされており、アプリイメージの設計
デザイナーがチェックしておきたい 最新フリー素材をあつめた「40 Freebies & Goodies For Web Designers – August 2015」
デザイナーがチェックしておきたい 最新フリー素材をあつめた「40 Freebies & Goodies For Web Designers – August 2015」 制作するものによっても変わってきますが、デザイナーにとってフリー素材は非常に重宝する存在。規模が大きくなるほど、トレンドに合わせたいろいろな種類の素材が必要となってくることもあるのではないでしょうか？そんな中今回紹介するのは、デザイナーがチェックしておきたい最新フリー素材をあつめた「40 Freebies & Goodies For Web Designers – August 2015」です。 Agenzia Multipurpose Psd Template | Pixel Mustache UI、アイコン、フォント、モックアップ、テーマなど、種類豊富に、比較的新しい素材がピックアップされています。 詳しくは以下 Sh
webデザイナーが押さえておきたいフリー素材を多数ピックアップした「50+ incredible freebies for web designers, June 2015」
webデザイナーが押さえておきたいフリー素材を多数ピックアップした「50+ incredible freebies for web designers, June 2015」 webデザイナーにとってフリーで使用できる素材は非常に便利であり、日々いろいろな種類をチェックされている方も多いのではないでしょうか？そんな中今回は、webデザイナーが押さえておきたいフリー素材を多数ピックアップした「50+ incredible freebies for web designers, June 2015」を紹介したいと思います。 Page Scroll Effects | CodyHouse アイコンやフォント、モックアップ、アニメーションやJS、テンプレートなど、種類豊富にフリー素材がチェックできるようになっています。 詳しくは以下 Free Lucid UI Kit – Lucid Site D
ロゴ制作やパーツ素材として利用できる チョーク風手描きテキストなフリーベクターセット「Free download: Chalk vector elements」
TOP > Design > ロゴ制作やパーツ素材として利用できる チョーク風手描きテキストなフリーベクターセット「Free download: Chalk vector elements」 アイコンやテクスチャ、psd形式、SVG形式など、素材にはいろいろな形式や種類が存在していますが、中でもベクター形式の素材は、いろいろな加工を施したり形や色を変えることが容易なため、とても重宝する素材だと思います。そんな中今回は、ロゴ制作やパーツ素材として利用できる、チョーク風手描きテキストなフリーベクターセット「Free download: Chalk vector elements」を紹介します。 チョークを使って描いたような、ラフなテイストのベクター素材がたくさんセットになっています。 詳しくは以下 いろいろな形が揃ったバッジタイプのもの、LOVEをテーマとしたもの、コーヒー%ベーカリー
webサイトの動きや表現などのクオリティ向上を図るためのツールまとめ「50 CSS and JavaScript Tools, Frameworks and Libraries」
webサイトの動きや表現などのクオリティ向上を図るためのツールまとめ「50 CSS and JavaScript Tools, Frameworks and Libraries」 webサイト上の仕様を自身ですべて開発するには時間やコストが必要であり、どうしても限界があることが多いと思います。今回はそんな時に参考にしたい、webサイトの動きや表現などのクオリティ向上を図るためのツールまとめ「50 CSS and JavaScript Tools, Frameworks and Libraries」を紹介したいと思います。 SassyFlags – Simple Sass Library for flags CSSやJavaScriptなどのツール、非常に多彩な種類が紹介されており、サイトを今よりもっと魅力的に演出することができます。気になったものをピックアップしましたので、下記よりご覧くだ
webデザイナーならチェックしておきたいフリー素材がピックアップされた「50 incredible freebies for web designers」
TOP > Design > webデザイナーならチェックしておきたいフリー素材がピックアップされた「50 incredible freebies for web designers」 日々、次々と新しい素材がアップされており、膨大な数の中からどれを選ぼうか迷ってしまうこともあるのではないでしょうか？そんな中今回紹介するのは、webデザイナーならチェックしておきたいフリー素材がピックアップされた「50 incredible freebies for web designers」です。 CSS3/jQuery Panel いろいろな種類のフリー素材が紹介されており、どれも使ってみたくなるクオリティの高いものばかりが揃っています。 詳しくは以下 Flat Text – icon sets フラットテイストのアイコンセット。シンプルかつミニマルなデザインなので、さまざまな種類のサイトで使
いろいろなシーンで活用できる 100種のラインアイコンセット「Iconomous」
アイコン素材は、いろいろなシーンで活躍してくれる非常に便利な存在。たくさん持っているほど表現にバリエーションを持たせることができます。そんな中今回紹介するのは、100種のラインアイコンセット「Iconomous」です。 フラットテイストなデザインにぴったりと合う、シンプルベースのアイコンが100種まとめてダウンロードできるようになっています。 詳しくは以下 矢印やファイル、データ、ツール、グラフといったビジネスデザインシーンで活躍する定番のアイコンから、フードやファッションアイテム、乗り物といった頻繁には使用しないけれどあると便利なアイコンまで、種類が豊富。アウトラインが太めで、中の描写は細めのラインを使って描かれており、アイコン1つ1つから表情のある強弱を感じることができます。 100種という豊富さも魅力、定番としてストックしておけば何かと活躍してくれそうですね。以下リンクよりダウンロー
デザインの現場でも使えるチャットサービス「チャットワーク」
デザインは一人で黙々と創り上げる作業も必要ですが、商業デザインの場合、様々な人とコミュニケーションをとり、情報を共有しながら、創り上げていくことも必要になります。そんな時に便利なのが、メールやスカイプなどのWEBを利用したサービス。すでに様々なWEBサービスを駆使して仕事をしているという方も多いと思います。 普段は私も、スカイプやEvernote、Gmailなど複数のサービスを利用して社内外のコミュニケーションを取りながらデザイン業務を行っていますが、今回は「メールの時代は終わった」と銘打ったWEBサービス「チャットワーク（ChatWork）」を紹介したいと思います。 詳しくは以下 チャットワークを利用する前の印象 まず「チャットワーク」を使う前に思ったことは正直、スカイプで十分なのではという印象でした。普段からスカイプを利用しているので、ファイル共有や情報共有、音声通話も可能ですし、不便
パターンやテクスチャ背景が活かされたwebサイトまとめ「Patterns and textures in web design: awesome examples and resources」
パターンやテクスチャ背景が活かされたwebサイトまとめ「Patterns and textures in web design: awesome examples and resources」 デザインの大枠を決める背景は、背景に質感を持たせることにより表現の幅が広がる、視覚的アプローチの重要な要素ではないでしょうか？そこで今回紹介するのは、質感を活かした背景デザインが特徴的なwebサイトまとめ「Patterns and textures in web design: awesome examples and resources」です。 galp.in シンプルなパターンから、サイトの特徴をダイレクトに伝えてくれるテクスチャまで、さまざまなwebサイトが紹介されています。中でも特に気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■stephencaver.c
木のテクスチャを使用したパーツデザインのチュートリアル集「Common Elements Used in Wooden UI Design」
TOP > Design > 木のテクスチャを使用したパーツデザインのチュートリアル集「Common Elements Used in Wooden UI Design」 木テクスチャを用いたデザイン展開は、どことなく優しさを感じられることが多く、多方面で利用されていますが、木と何を組み合わせるかで与える印象も少しずつ変わってくると思います。そこで今回紹介するのは、木のテクスチャを使用したパーツデザインのチュートリアル集「Common Elements Used in Wooden UI Design」です。 豊富な実例を元に解説されているので、イメージがつきやすくデザインの参考にしやすいサイトとなっています。 詳しくは以下 「木とファブリック」「木に貼付けられた紙」のように、木をデザインに基準においたアレンジデザインのよくあるパターンが紹介されており、豊富な実例デザインと解説で、
100以上のハイクオリティなXHTML/CSSフリーテンプレート「100+ Stunning XHTML/CSS Free Templates [HQ] 」
TOP > WebDesign > 100以上のハイクオリティなXHTML/CSSフリーテンプレート「100+ Stunning XHTML/CSS Free Templates [HQ] 」 制作に便利なフリーテンプレート。デザインやレイアウトによってはそのまま、もしくはサイト制作のベースとして便利に利用できますが、今日紹介するのは、100以上のハイクオリティなXHTML/CSSフリーテンプレートを集めたエントリー「100+ Stunning XHTML/CSS Free Templates [HQ] 」です。 Download Harvest 数多くのフリーテンプレートがまとめられていますが、今日はその中から特に気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Download Imagination シンプルながらも、ドロップシャドウや、細かな処理で立体
![100以上のハイクオリティなXHTML/CSSフリーテンプレート「100+ Stunning XHTML/CSS Free Templates [HQ] 」](https://cdn-ak-scissors.b.st-hatena.com/image/square/29dfb44458400fed264d895b28edab2d22bb816f/height=288;version=1;width=512/https%3A%2F%2Fdesign-develop.net%2Fwp-content%2Fuploads%2F2011%2F03%2Fharvest.jpg)
デザイン制作の定番 キャンバス素材のテクスチャ「14 High-Res Paper & Canvas Textures」
TOP > Design > デザイン制作の定番 キャンバス素材のテクスチャ「14 High-Res Paper & Canvas Textures」 デザインを制作する際に、素材感をプラスしたい時やクオリティを高めたいと時などよく利用するテクスチャ。さまざまな種類が展開されており、日々活用されているという方も多いかと思います。そんな中今回紹介するのは、デザイン制作の定番素材とも言える、キャンバス素材のテクスチャ「14 High-Res Paper & Canvas Textures」です。 キャンバスの質感を存分に感じさせてくれる、シンプルなタイプのテクスチャ。さまざまなデザインへのアレンジが可能なこともあり、かなり活用できるテクスチャセットではないでしょうか。 詳しくは以下 素材自体は全体的に暗めの色で展開されていますが、加工や工夫次第でどんなデザインにもマッチしてくれそう。あ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
