タグ

WEBデザインとUXに関するkenzy_nのブックマーク (5)

  • リニューアル直後に月間利用300%伸び、Web会議システム「Calling」のデザイナーが仕掛けたUXとは? - ネオキャリアグループ エンジニアブログ

    はじめまして、2018年の5月からCalling(https://www.calling.fun)でプロダクトデザインを担当しているKottyです。 今年の9月に、Callingはプラットフォームサービスとしてリニューアルしました。 もともとバラバラだったサービスを、どのようにリニューアルしたのか、リニューアル直後に月間利用時間が300%も伸びたサービスをどのようにデザインしたのか、をデザイナー視点から紹介します。 デザイナーって何をする人? デザイナーは、成果物を人に見てもらいやすい職業なので、よく「綺麗なデザインをする」「サイトをコーディングする」という印象を持たれることが多いです。 実際にはそれだけではなく、「情報設計」や「ユーザー体験(UX)」といった成果物が見えづらい事を考える重要な役目も担っています。 その設計を元に、ユーザーが操作するウェブサイトに表現するところまでがデザイナ

    リニューアル直後に月間利用300%伸び、Web会議システム「Calling」のデザイナーが仕掛けたUXとは? - ネオキャリアグループ エンジニアブログ
  • このCSSアニメーションのアイデアすごい!CSSの疑似クラスで実装するフローティングラベル

    <label for="inp" class="inp"> <input type="text" id="inp" placeholder="&nbsp;"> <span class="label">Label</span> <svg width="120px" height="26px" viewBox="0 0 120 26"> <path d="M0,25 C21,25 46,25 74,25 C102,25 118,25 120,25"></path> </svg> <span class="border"></span> </label>

    このCSSアニメーションのアイデアすごい!CSSの疑似クラスで実装するフローティングラベル
  • 今さら聞けないマテリアルデザインとは?5分でわかる解説 | SONICMOOV LAB

    2014年6月にGoogleマテリアルデザインガイドラインが公開されてから、AndroidはもとよりiOSのアプリでも、このガイドラインを取り入れたUI/UXの優れた作品が多数出てきました。 今回はそんな相変わらずトレンディなマテリアルデザインのガイドラインをわかりやすく、ポイントを絞ってお伝えします。 目次 マテリアルデザインとは? 平面なのに3D 紙とインク マテリアルデザインのカラー グリッドシステム アニメーション 心地の良い動き タッチフィードバック 意味を持ったアニメーション まとめ マテリアルデザインとは? マテリアルデザインを直訳すると「物質的なデザイン」という意味です。 デジタルのデザインなのにどの辺が「物質的」なのか、それは次の2つの概念で表現されています。 平面なのに3D マテリアルデザインでは、要素の重なりを物理的にとらえ、平面の中に、明確なZ軸の概念を持たせていま

    今さら聞けないマテリアルデザインとは?5分でわかる解説 | SONICMOOV LAB
  • 今年からウェブ業界に務めた人にお薦めしたい本10冊 - 鈴木です。別館

    いい年して、まだまだウェブ業界歴は短い鈴木です。 この年齢から、経験無しでこの業界に移る人は少ないと思います。そんな鈴木がウェブ業界に勤めだして間もない方にお薦めしたい10冊を紹介します。 WACA初級ウェブ解析士 認定試験公式テキスト第5版 作者: WACA 一般社団法人ウェブ解析士協会,WACA 一般社団法人ウェブ解析士協会カリキュラム委員会 出版社/メーカー: WACA 一般社団法人ウェブ解析士協会 発売日: 2014 メディア: 大型 この商品を含むブログを見る 初級ウェブ解析士という試験の教ですが、この資格を受ける受けない関係なしに読んでおいて損の無い1冊です。ウェブ業界にいる以上覚えないといけないアクセス解析やウェブマーケティングの事が体系的に学べます。しかし、この書籍で学べるのは表面上の体系です。ただ、繋がりが見えてくるので、その中で自分で覚えないといけない事を中心に他

    今年からウェブ業界に務めた人にお薦めしたい本10冊 - 鈴木です。別館
  • 他人の知識から学びとれ!Webディレクターに役立つ厳選スライド資料まとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    勉強欲が強いディレクターの鮫島です。 普段みなさんは知識を得るためにどのような勉強をしていますか?? を読んだり、セミナーに行ったり、Facebookのタイムラインに流れてくる技術系の記事を見たりすることが多いかと思います。 私も大体そうなのですが、最近それ以外にも勉強する方法を模索しています。 その中の1つとして、ちょこちょこ目に付くオンラインの「スライド資料」がとても分かりやすくて、ちょっとした合間に勉強できます。そこで、私が最近見た中でも、見やすくて勉強になったスライドをいくつかご紹介します。 ちなみに、オンラインのスライド資料サービスについては、過去にディレクターの勢古口が「より美しいプレゼン資料を共有しよう。オンラインプレゼンツール7選」でまとめていますので、ご興味あればこちらもご一読ください。 ディレクター向けのスライド資料まとめ IAシンキングによるモバイル再設計 内容 I

    他人の知識から学びとれ!Webディレクターに役立つ厳選スライド資料まとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 1