マテリアルデザインのガイドラインが最高に実践的だった
「2014年にグッときたコレ」がテーマになる Fenrir Advent Calendar 2014 の24日目です。 マテリアルデザイン デザイナーの大西です。マテリアルデザインそのものへの記事は既に多くの方々が取り組まれているので、少し目先を変えてガイドラインについてです。 このガイドラインが最高に実践的でグッときました。 UI・UXについてのガイドラインは面白くて勉強にもなるのですが、理解して実践するところにまで到達するのには中々のエネルギーを使いませんか？ マテリアルデザインは英語のドキュメントなので最初は尻込みしましたが、読み進めるうちに内容の充実っぷりに引き込まれました。ここまで親切なガイドラインは珍しいと思います。和訳も欲しいところですが、用例として画像がたくさん挙げられているので翻訳サイトを使えば充分理解できると思います。 豊富なテンプレートと素材 750種類以上のアイコン
左サイドバーと右サイドバーとサイドバー無し、どれが好き？サイドバーの目的について - 鈴木です。別館
ここ最近、はてなブログを見ていると左サイドバーが多く感じるようになりました。つい1ヶ月くらい前までは左サイドバーは稀だったというのがボクの印象です。 好みや慣れという事もあるのですが、個人的にはブログなら右サイドバーが好きです。 サイドバー無しというのは、結構自分としてはハードルが高いため採用しないな～と思っています。サイドバー上部のクリック課金型広告を出したいから使用しない サイドバーがあるといろんな情報が読み取れるので便利ですよね。 上記の写真より 上記の写真を見てもらうと、右の空白よりも左のダンボーに最初に目が行く方が多いかと思います。 人は、ネットだと左から右に目を運ぶ習性があると言われています。 サイドバーの効果 サイドバーのあるブログのメリットはいろいろありますし、UIを考えた時にはサイドバーはあった方が良いと思っています。 もちろん、好みや主張を持ってサイドバー無しをされてい
アプリUI/UXデザイナー必見！「ハンバーガーボタン」ナビゲーションを使うとユーザーエンゲージメントが半減することが発覚 | ゴリミー
あなたが作っているナビゲーションボタンは今流行りの「ハンバーガーボタン」、またの名を「ナビゲーションドロワー」を採用しているだろうか。それとも一覧で表示している「タブボタン」を採用しているだろうか。 クリーンでシンプル、メインコンテンツの表示領域が最も広く確保できるなどいいこと尽くしの「ハンバーガーボタン」ナビゲーション。一方で、常にボタンが表示されメインコンテンツの表示領域が必然的に狭くなってしまう「タブボタン」ナビゲーション。見た目のデザインとしては当然「ハンバーガーボタン」の方が良い。では実際にユーザーとしても同様の見解なのだろうか。 クリーンでシンプルだが、ユーザーは操作方法を覚えられない 「ハンバーガーボタン」もしくは「ナビゲーションドロワー」と呼ばれるナビゲーションUIは数多くのアプリに見られる。Googleもアプリデベロッパー向けにオススメのデザインパターンとして推奨している
英国政府のWeb担当が作った“デジタルデザインの原則10か条”がスゴい！ | 初代編集長ブログ―安田英久
今日は、英国政府のWebサイトなどを担当する「政府デジタルサービス（GDS）」の部署が公開している「デザイン原則の10か条」について。「良いデジタルサービスを作り、運営していく」ためのポイントがコンパクトにまとめられています。 英国政府（gov.uk）のサイトには、「デザイン原則（Design Principles）」というページがあり、そこには、次のようなことが書かれています。 まずニーズからはじめる ―― 自分たちのニーズではなく、ユーザーニーズから。本当のユーザーを理解し、そのニーズを知る。想像や思い込みではなく、ちゃんとデータで。 なんでもかんでも手を広げず、するべきことだけをする ―― 政府がしなければいけないことだけをし、他の人がすでにやっていたら協力する。 データをもってデザインする ―― 試作し、実際のサイトで実際のユーザーにA/Bテストを行い、その結果をデザインに活かすや
Google の新しいデザインガイドライン「Material Design」 | DevelopersIO
Material Design Google I/O 2014 で新しいデザインガイドラインが発表されました。 Google Design その中で注目されるキーワードが「Material Design」です。これは直訳すると「素材のデザイン」という感じになりますが、これは現実世界の素材をメタファーとすることでユーザーにとってわかりやすくなるように考えられたデザインのようです。 ということで、Material Design について簡単にまとめつつ、どうやってデザインを始めていけばいいか考えていきたいと思います。 Google Design のガイドラインを個人的に解釈した内容を掲載しています。誤解などありましたらコメント欄にて連絡ください。喜んで修正します。 イントロダクション まずはじめに Material Design の概要です。本文をそのまま引用します。 We challenge
本格バナー制作で学ぶGoogle Web Designerの使い方 (1/4)
Google Web Designerの基本からアニメーションの作成までを学ぶ連載。第3回では、Google Web Designerを使って実際の業務を想定したクリエイティブバナーを作成します。 基本操作については前回の記事で解説しましたので、今回は主にアニメーションモードの詳しい使い方を中心に学びましょう。 Google Web Designerで実際にクリエイティブバナーを作成しよう 今回作成するのは、次の2つのバナーです。 1つ目は、「クイック」アニメーションモードで制作した不動産会社のバナーで、夜景の写真が横にスライドするシンプルなものです。2つ目は、「詳細」アニメーションモードで制作したカフェのバナーで、スライドとフェードを組み合わせて、複数ページを切り替えます。 「クイック」アニメーションモードで作る不動産会社のバナー 最初に、背景が横方向に流れるような動きのバナーを作りまし
WEBプログラマの私が開発現場で学んだSEOを一挙公開！ - 文系プログラマによるTIPSブログ
2014-05-22 WEBプログラマの私が開発現場で学んだSEOを一挙公開！ SEO 誰もが悩むSEOですが、私が沢山のWEBサイトを開発してきた中で、これさえ対応すればSEOは問題無いよ！というものをまとめたので、公開してみようと思います。SEOは Search Engine Optimize の略で、言葉通り検索エンジンに対する最適化です。決してユーザビリティの向上等、ユーザへの施策では無い事を理解しましょう。（プログラマーなら）最低限SEOをやっておくべきであり、その後にマーケティングやユーザビリティ向上を目指しましょう。 では早速見ていきます。 ちょっと長いですが、頑張っていきましょう！！ ■ htmlタグ titleタグ 対応しないとどうなるか titleタグが無い場合や「無題ドキュメント」等となっている場合、検索エンジンが頑張って自動的にタイトルを表示してくれます。すると
なぜデザイナーはボタンをあと3ピクセル左に寄せるべきなのか？
by Ugo Cristofori デザイナーにとってデザインのディテールは非常に気になるところですが、デザイナー以外には違いがあまり伝わらず「ボタンを3ピクセル動かすだけで製品が改良されるの？」と言われたりします。しかし、プロダクトデザイナーとしてGoogle Venturesで働いているBraden Kowitzさんは「それでもデザイナーは細部にこだわるべき」として、細部までこだわるべき理由と、他の人たちにそれをどう伝えるべきかのテクニックについて語っています。 Why you should move that button 3px to the left | Google Ventures http://www.gv.com/lib/design-details ◆デザインは外見のためだけに行うのではない by Bytemarks ・ディテールを適切にすると信頼感が増す 顧客がオンラ
エンジニアからディレクターに転身してから読んだ本14冊 - No Web Service No Life
私は、元々エンジニアとしてランサーズに入社し、途中からディレクターに転身しました。ランサーズに入社する以前は、Googleアナリティクスをいじったこともなければ、CVRやCPAといった基本的なマーケティング用語すら知りませんでした。 まだまだ知識・スキル不足ではありますが、今まで得たものの多くは実際の業務を通して得られました。一方で、書籍を読むことで以下の二つのメリットがあると感じており、読書の時間を取るように努めています。 業務で得たスキル・知識を体系的に整理して定着させる そもそも知らないことをショートカットして知ることができる ディレクターに転身してから、必要な知識を身につけるために読んだ本を、ジャンル別にご紹介します。 Webエンジニアの時のおすすめ書籍は下記にまとめてあります。 kkino.hatenablog.com 基本的なビジネススキル どの職種においても必要なスキルだと思
人生のヒント 人生の悩みごとへの解答、ヒント、答え。哲学や倫理に関する話をまとめています｜
「思ってることを言葉にできない」のは、自分に許可していないからだ 2024年4月7日 dshocker
超便利！Googleが公開したWordPress用プラグイン「Google Publisher Plugin (beta)」を早速使ってみた！ : め〜んずスタジオ
2014年01月16日 超便利！Googleが公開したWordPress用プラグイン「Google Publisher Plugin (beta)」を早速使ってみた！ カテゴリ:WordPress解説 2014年１月15日、GoogleがWordPressで簡単にGoogle AdSenseとウェブマスターツールを扱えるプラグインをリリースしました！ 公開されたのは「Google Publisher Plugin (beta)」で、バージョン 0.1.0。 このプラグインをインストールすると、WordPressのブログやサイトに対して簡単にGoogle AdSenseの広告を配信できるようになります。 また、ワンクリックでGoogleのサイト管理ツール「ウェブマスターツール」を確認できるようにもなりますよ！ とりあえずインストールしてみた！ 僕が持っているミスタードーナツのファンブログ「ミ
「実務で使うためのレスポンシブWebデザインの基礎・実践」に参加しました。 |
11月16日に北九州のMIKAGE1881 で行われた「実務で使うためのレスポンシブWebデザインの基礎・実践」に参加してきました〜！ 今回は「レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)」の著者である菊池崇さんにお越しいただき、とても濃い内容の勉強会となりました♪ ▼菊池崇さんの略歴はこちら http://all-web.org/instructors/#satoshi-kikuchi 今回は北九州の開催であったにもかかわらず、福岡からの参加者の方も多く、大盛況！ 私はまたもや受付をお手伝いさせていただきましたよｗ 期待通り、参加してよかったー！と思えるセミナーでした♪ 私の脳みそでは理解できないことが多すぎたのですが、自分用にメモった内容をまとめます。 RWD（レスポンシブWebデザイン）導入の障壁 １．クライアントの理解
無料でHTML5を使った広告やアニメーションが直感的に作れる「Google Web Designer」ベータ版でアニメーションを作ってみました
iOSはFlashに対応していないため、これまでウェブデザインには限界がありましたが、そんなウェブデザインの幅を広げるであろう、動くHTML5広告を制作できるツール「Google Web Designer」ベータ版がGoogleから公開されました。非常に直感的に使えるツールとなっており、アニメーションやイメージギャラリーも簡単に作れるということなので、実際にアニメーションなどを作ってみました。 Google Web Designer http://www.google.com/webdesigner/ 実際に作成したアニメーションは以下のような感じです（動いていない場合はブラウザを更新して再読み込みすれば再度動きます）。 まずは「Download Web Designer Beta」をクリック。 利用規約が表示されるので、「Agree and Download」をクリックしてダウンロードを
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
Googleアナリティクスオタクの私が、毎日見ているたった1つのレポートの、本当の見方を教えよう［第60回］ | Googleアナリティクスとは／衣袋教授のGoogleアナリティクス入門講座
ここまでGoogleアナリティクスの導入と基本設定、代表的な指標など言葉の意味、各レポートをどのように利用するかといったことを解説してきた。 しかし忙しいWeb担当者の皆さんは、毎日Googleアナリティクスのデータを見て、Webサイトの改善に役立つようなヒントを探し出す時間はそれほど持ち合わせていないだろう。 限られた時間の中で、どのようにGoogleアナリティクスを活用したらよいかというヒントを、今回はご紹介しよう。 導入時は、課題解決・問題発見のための分析Googleアナリティクスを導入したところならば、まずはさまざまなデータを見てサイトの問題発見のヒントを探す「課題解決あるいは問題発見のための分析」をしてほしい。 その際に、次の3つのポイントに注力して分析すれば、大きな問題点はこのデータ分析初期の段階で比較的容易に発見できるだろう。 コンバージョンなど成果に近い部分でのボトルネック
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
[CSS]2013年、素敵なアイデア満載のスタイルシートのテクニックのまとめ