Webデザインが進化したからこそ「やってはいけない」5つのこと
Webサイトがレスポンシブ対応していたり、常に表示する必要のないメニューはハンバーガーメニューで隠したりと、業界で共有されている*Webデザインの「あるべき姿」*は、常に少しずつ進化しています。 その下支えになっているのがブラウザ技術です。Webrageの調査によれば、Internet Explorerを超えてGoogle Chromeが国内外で圧倒的シェアを獲得していますが、Google Chromeは6週間ごとに安定版がリリースされており、アップデートごとにブラウザの技術も進化しています。結果的に、Webデザインでできる幅も広がるのです。 しかし、Webデザインでできることが多くなったからといって、必ずしもデザイン上のテクニックがユーザー体験(UX)を向上させるとは限りません。 そこで今回は、Webデザインが進化したからこそ「やってはいけない」5つのことをまとめました。よかれと思って実
軽量なのに強力！jQueryそっくりなJavaScriptライブラリ「Umbrella」とは？
オープンソースのjQueryライブラリはWeb開発の現場において何年もの間不動の地位についていました。 JavaScriptのことを深く理解していなくとも、オブジェクト指向で分かりやすい構文、豊富な外部プラグイン、加えてAjaxなどの非同期通信も簡単に扱うことができたのが、その人気の理由です。 JavaScriptを用いた開発現場ではいまもなお人気のjQueryですが、ここに来て新たなJavaScriptライブラリが注目を集めています。 それが、Umbrellaです。 UmbrellaはjQueryと同様に完全オープンソースで、jQueryと同じく要素セレクタを扱うことができたり、DOM操作ができたり、Ajaxリクエストを行うことができます。 また、UmbrellaはjQueryと若干異なる文法や関数の呼び出し方を採用していますが、基本的に残りの部分はほとんどjQueryと一緒です。 それ
そういうことだったのか！と思わずうなずく「機械学習」超入門
最近、Web業界やテクノロジー分野で人工知能(AI)やデータマイニング、ディープラーニングなどのキーワードとともによく耳にするようになった言葉の一つに「機械学習(マシーン・ラーニング)」という言葉があります。 機械学習はGoogleの自動運転車をはじめ、AmazonやZOZOTOWNなどのオンラインショップやNetflixやAWAなどの音楽ストリーミング配信サービスで使われるレコメンデーション機能、twitterやインスタグラムで顧客が投稿している内容を分析するマーケティングオートメーションなど、今日の社会でも頻繁に活用されています。 「機械学習」は、今後Web業界で取り残されないためにフォローするべき重要なキーワードの一つであることは間違いありません。 それでは、機械学習とは何であり、なぜこれほど注目されるのでしょうか。 今回は、「機械学習」の概要から、Web業界の関連者が知っておくべき
デザイナーが確認しておきたいデザインリソース完全ガイド80選
今の作業フローをもう少し良くしたい、と考えているデザイナーの方は多いのではないでしょうか。 日々のデザイン作業を"より快適に" "効率良く"するためには、デザインリソースを確認しておくことが重要です。 しかし、たくさんのツールやサービスがあり、実際問題どれを選んだらいいかわからなかったり……そもそも調べるのが面倒という方も決して少なくないはずです。 そこで今回は、数ある中からオススメしたいデザインリソースをピックアップしてご紹介します。 気になるものがあれば、今すぐ活用してみてはいかがでしょうか。 ※素材数などは2016年12月21日時点での情報です。今後変更となる可能性がありますのでご了承ください。 画像・動画素材関連 1. freepik http://www.freepik.com/ ベクター、PSD、アイコンと、様々な形式でデータが用意されている、便利な素材がたっぷり揃った素材サイ
Webブラウザのプッシュ通知を簡単に実装！「Push.js」の使い方を徹底解説
スマートフォンアプリではおなじみのプッシュ通知。 実は、Webブラウザからもできることをご存知でしょうか。 JavaScriptの*「Web Notification API」*というプッシュ通知を制御するAPIを使うことで、モバイルだけでなくデスクトップにもWebサイト経由でプッシュ通知ができるようになります。 しかし、モダンブラウザの多くがサポートを始めている一方で、まだ利用したことがないひとも多いのではないでしょうか。 今回は、Web Notification APIを簡単に扱うことができるPush.jsを使って、簡単にブラウザ通知を実装する方法をご紹介します。 プッシュ通知とは？ これまでは、ホームページの更新を通知する方法としてはRSSやメールなどを利用している人が多かったのではないでしょうか。 しかし、RSSはRSSリーダーに登録する手間が必要で、メールでもメールアドレスをユー
説明なしでもわかるUIを実現するために！マイクロインタラクションの基本を理解しよう
こんにちは。TechAcademyの小嶋です。 皆様は「マイクロインタラクション」という言葉をご存知でしょうか。 誰にでもわかりやすいUI/UXを目指したもので、Webサービスやアプリなど様々な場面で使われています。 朝起きてアラームを解除するところから夜スマホの充電を開始してから寝るまで、数多くのマイクロインタラクションに触れています。 今回は、マイクロインタラクションの基本概念と利用するメリットを解説します。 あらゆるサービスに応用できる概念なので、ぜひこの機会に覚えておきましょう。 マイクロインタラクションとは:誰でも直感的に何をすればいいかがわかるデザイン マイクロインタラクションとは、「ヒューマンセンタードデザイン(人間中心のデザイン)」と呼ばれるデザイン手法の1つで、「今どのような状況で、次にどう行動すれば良いのかを直感的なUIで伝える」ことを目的としています。 説明書を読まず
Flexboxでグリッドデザインを実装できるCSSフレームワーク15選
CSSでよく使うコンポーネントをフレームワークとしてまとめているCSSフレームワーク。 その多くは、レスポンシブに対応した機能も標準対応しているので非常に便利です。 そうしたCSSフレームワークの中でも、レイアウトにFlexboxを使用したモダンなフレームワークが次第に増えてきました。 また、古いIE（インターネットエクスプローラー）のサポートの打ち切りや、主要ブラウザがCSS3の機能の多くをサポートしているので、Flexbox（フレックスボックス）を使う機会も多くなってきました。 そこで今回は、Flexbox対応のCSSフレームワークをまとめてご紹介していきます。 Flexboxを使えば段組が簡単になりますが、さらにCSSフレームワークを使うことで、Flexboxの基本的な設定もすでに組み込まれているので非常に便利です。 それぞれに特徴があるので、ぜひ自分にあったCSSフレームワークを見
Webサイトの目的別5パターンの鉄板レイアウト
Webサイトの目的は様々あります。 サービスの認知度向上や広告での売上獲得などあらゆる目的が存在し、それぞれに応じた最適なレイアウトがあります。 今回は、目的別に代表的なレイアウトを、最新トレンドも交えながらご紹介します。 これからWebサイトを制作する方はもちろん、現状のWebサイトが目的に対して最適なレイアウトになっているかという観点からも参考にしてみましょう。 1.商品やサービスの認知度を向上させたい いわゆるプロモーションのためのWebサイトです。広告では、表示回数（露出数）を主に狙っていきます。よりユーザーの記憶に残るように、サービス・商品の名前や特徴を印象付けるデザイン・レイアウトが必要になってきます。 よりビジュアルに特徴をもたせたものが多いです。最近では画面いっぱいに写真や動画を配するデザインが流行しており、Bootstrapのテンプレートを使用すれば簡単に導入できるのでオ
目にした瞬間に思わずダウンロードしてしまう！高画質な無料ベクター素材108選
4月は花見、入学・入社式、5月は母の日、ゴールデンウィーク、こどもの日……と、この2ヵ月は様々な行事で盛り上がるシーズンです。 そんなイベントのPRにぴったりなデザインの素材がたくさん登場！ 今回は今使えるベクター素材を108個まとめてご紹介します。 チラシ、資料、ホームページにちょっとしたイラストを加えるだけで、春らしい印象を与えることが可能です。どれも無料で使えますので、早速ダウンロードして使ってみてください。 春イベントに使える高品質無料ベクター素材まとめ 1. Set of four hand-drawn spring labels http://www.freepik.com/free-vector/set-of-four-hand-drawn-spring-labels_1062757.htm 春をテーマにした、手書きラベルのコレクションです。 2. Family vacati
大胆なデザイン変更に最適！キャンペーンやシーズンに合わせて使いたいパターン素材60選
デザインをするうえで、使用する機会の多いパターン素材。例えば、背景デザインをガラッと変えたいとき、すぐにイメージチェンジをしたいときに重宝します。 今回は、最新のデザインから、定番の柄、季節にぴったりな素材まで60種類ご紹介します。 ストックとしてダウンロードしておくだけで、いざというときに使えて便利ですので、気になるものがあればダウンロードしてみてください。 無料パターン素材60選 1.gray circular seamless pattern http://www.freepik.com/free-vector/gray-circular-seamless-pattern_845845.htm 円を一面に配置したシームレスなパターン素材です。 2.Watercolor floral decoration pattern http://www.freepik.com/free-vect
Sketchを使い倒すための便利プラグイン16選
ここ最近注目を集めているデザインツールといえば、Mac用ベクターグラフィックソフト「Sketch」です。 数年前までは日本ではほとんど知名度はありませんでしたが、Fireworksの開発終了後から徐々に注目が高まり、日本国内でも使用する人が増えています。 Adobe製品と比較すればまだまだ情報量不足のSketchですが、豊富なプラグイン、軽い使い心地などSketchならではの魅力もありデザイナーの間で話題となっているツールです。 今回は、デザイナーなら入れておきたいSketchのプラグインをまとめてご紹介します。 すでにSketchを使い始めている方はもちろん、興味を持っているという方もぜひ参考にしてみてください。 デザイン作業が捗るSketchプラグインまとめ 1.Sketch Palettes https://github.com/andrewfiorillo/sketch-palet
デザイナーが思わずとっておきたくなる！無料のPSDファイル86選
プロダクトデザインを行う上でよく使うモックアップは、Web制作やその他デザインの場面、ビジネスの様々なシーンで活用することができます。 例えば、Web制作の場面では、ホームページのデザインにそのまま使うことが可能です。ビジネスの現場では、プレゼン資料で完成予定のデザインを見せたい時に使えます。 様々なタイプの素材があり、しかも無料で手に入るものが豊富にありますので、活用しない手はありません。 今回は、そんな便利なPSD素材の中から無料のものだけをピックアップしてご紹介します。 ビジネスに、デザインに、ぜひ活用してみてください。 ビジネスからデザインまで、幅広いシーンで重宝する無料PSD素材まとめ 1. 3 Elegant Macbook Pro MockUps http://graphicburger.com/3-elegant-macbook-pro-mockups/ 異なる3シーンを収
ビジネスマンが公にカンニングできる企画書共有サイトと良記事10選
どのようなビジネスでも、企画書や資料の作成はつきものです。 そんな企画書ですが、なかなか上手く作れなかったり、作成途中で迷ってしまうことも少なくありません。 そのような企画書や資料作りにおける悩みは、他の人が作ったものを参考にしてみるといいでしょう。 今回は、企画書をのぞき見できるサイトや良記事をまとめてご紹介します。 ぜひ企画書づくりの参考にしてみてください。 人が作った企画書が見られるサイト 1.SlideShare http://www.slideshare.net/ SlideShareは、PowerPointやKeynote、pdfのプレゼン資料・企画書をアップロードできるスライドホスティングサービスです。 元々は「オンラインで知識を共有する」というコンセプトで資料を社内共有するために作られたものですが、徐々に一般ユーザーが増えていき現在は多くの一般ユーザーが資料を公開しています
デザイナー必見！デザインが学べるスライドシェア40選
デザイン業界は常に新しいトレンド・技術が続々登場し、目まぐるしいスピードで変化しています。きっと「常に情報収集を行っている」というデザイナーの方も少なくないはずです。 今回は、ぜひそうした方々に有益な情報をご紹介します。情報収集というと、インターネットや本などを通じてというのをイメージされる方が多いかと思いますが、スライドシェア（Slideshare）もオススメの手段です。 「スライドシェアが何か」というと、プレゼン資料をインターネット上で公開・共有するサービスを指します。良質なスライドが数多く揃っていますので、知識を深めたい方にはもってこいです。今回は公開中のスライドシェアの中でも、特にデザインが学べるスライドを中心にまとめてみました。ぜひ参考にしてください。 デザインの学習にもってこい！デザイナー向けスライドシェア 1. 優れたデザインの 定義と思考方法 https://www.sli
大公開！ferretが毎日チェックしている、メディア・ブログ46選｜ferret [フェレット]
Webサイトを運営している方であれば、さまざまなメディア・ブログなどからの情報収集を欠かかすことはできません。 ferretも同様であり、常日頃から大手メディアから個人ブログに至るまで幅広く情報収集を行っています。 今回は、ferretがRSSに登録して毎日チェックしている選りすぐりのメディア・ブログ44選をご紹介しますので、ぜひ情報収集にお役立てください。 このニュースを読んだあなたにオススメ プライバシーポリシーを記載しよう 情報収集には欠かせない！便利なFeedlyのイロハを解説 効率的に情報収集できるGoogleアラートの使い方 Google／Yahoo! 1.Google Japan Blog http://googlejapan.blogspot.jp/ Google Japanが発信している、主にGoogleに関する情報が日本語で書かれているブログです。 Googleの公式サ
![大公開！ferretが毎日チェックしている、メディア・ブログ46選｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/abd8a352caf29e369ad6e258c6607ba38b68a1b0/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F3018%2Fog_image%2Fdefault-dbd81f463395226e1d8e7943fac918f8.jpg)
Macユーザーにオススメ！Keynoteの無料テンプレートまとめ
【パワーポイント作成】伝わるデザインのコツ ほんの一手間で驚くほど見やすく変わる！パワーポイントやGoogleスライドなど資料のデザインを見やすく仕上げるコツを解説します。 無料で使えるKeynoteテンプレートまとめ 1.Azusa http://memo.sanographix.net/post/82160791768 "大体いい感じになる"というコンセプトのKeynoteテンプレートです。今時っぽいカラーリングと素敵なフォントのスライドが作れます。日本製ですので、使いやすさも抜群です。 2.Modern Report https://hislide.io/product/modern-report-free-key-template/ 白を基調とした背面と黒や灰色文字によってシックな雰囲気のあるテンプレートです。 3.X Grey Keynote Template http://ww
意外と見落としがち！ホームページ制作する前にオススメのフレームワーク
今やどのような業種でもWebマーケティングは欠かすことのできない存在となり、ほぼ全ての企業が「ホームページ」を持つ時代となりました。 そのような背景もあり、CMSの登場をきっかけにホームページ作成のハードルは年を追う毎にどんどん低くなり、ブログを作るような感覚で簡単に短時間で制作できるようになっています。 しかし、制作が簡単になった分、「とりあえず作ってみて様子を見る」というような運用をされている方も少なくないのではないでしょうか。 ホームページはただ作っただけでは意味を持ちません。 今回は、ホームページ制作時に必ず踏むべきプロセスについて解説します。 ホームページにはコンセプトが不可欠 Webで収益を上げたい、インバウンド営業を強化したい、ブランド認知を広めたい等、企業としてホームページを立ち上げる目的は様々です。 ただ、どのような目的であれ、ホームページを作る時に避けて通れないのは「ど
デザイン不要の高品質無料ベクター素材96選【1月編】
ferret編集部：2016年1月7日の記事を更新しています。 普段少しでもデザイン作業をするという方なら、誰でも一度は素材探しに苦労したことがあるのではないでしょうか。特に年末年始のように業務が多忙な時は、素材探しに時間をかけられなかったり、一から素材を作るなんていうことも少なくありません。 そこで今回ご紹介するのは、2017年がスタートし、再び業務が本格スタートした皆様に業務にすぐに役立つ情報です。クオリティーを落とさず、デザイン業務を少しでもスピーディにこなす上で欠かせない便利なベクター素材をご紹介します。 すべて無料のパターン素材で、日常使いできる定番系デザインをはじめ、大活躍間違いなしのベクター素材をたっぷり96個まとめました。 気になるものがあれば、早速ダウンロードしてみてください。 定番から年末年始向けまで！無料ベクター素材まとめ 1. 2017 wishes label d
物足りなさの原因は整理ができていないから？デザイナーのためのグリッド活用術
ロゴやビジュアルのデザインをしているとき、なんとなく上手くできないと感じた経験はないでしょうか。 デザインが失敗する原因の一つとして、レイアウトが問題となっていることが多くあります。 その場合は、レイアウトに規則をつくるだけでしっかりとしたデザインになることも多いので、デザインをおこなう機会がある方は覚えておくと便利です。 今回は、レイアウトを行う際に使う手法である「グリッド」の活用に関する情報をまとめてご紹介します。参考実例として実際にグリッドを使ったロゴデザインもピックアップしています。 自分のデザインがいまいちだと感じている方、デザインを始めたばかりの方は特に必見です。 デザインのクオリティを高める！グリッドの活用まとめ 1.グリッドとは 引用：http://welovetypography.com/post/11817 グリッド・システムとは、スイス出身のデザイナー ヨゼフ・ミュー
【11月編】プレゼンからモックまで！無料のPSDファイル49選
プレゼン資料や製品、ホームページのデザインで、実際の完成イメージを伝えたい時があるのではないでしょうか。 そんな時に、役立つのがPSD形式のモックアップやテンプレートです。 デザインしてあるベースの画像に製品の画像を差し込むだけで、手軽にプレゼンに適した画像が作れます。 今回は、無料で使える便利なPSDファイル50個をご紹介します。 いずれも高品質かつ実用性が高いので、使えそうなものがあればぜひダウンロードしてみてください。 無料で使える便利なPSDファイルまとめ 1.Psd iPad Pro Vector Mockup http://www.pixeden.com/psd-mock-up-templates/psd-ipad-pro-vector-mockup iPad Proをリアルに表現したPSDモックアップ素材です。 2.Woman Psd Marl T-shirt Mockup
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
