この記事はドワンゴ AdventCalendar 2017の17日目の記事です。 dwangoアドベントカレンダー17日目を担当させていただきます @ln-north です。デザイナーとして2016年度新卒として入社し、もうすぐ2年になります。 エンジニアさんで埋められるカレンダーの中、ひっそりとデザイナーも参加させていただきます、どうぞお手柔らかに…。 はじめに ここ何年かのWebフロントエンド界隈の動きは非常に大きくそして速く、デザイナーから見ても様々なパラダイムシフトが起こっています。scssやwebpackからHTML5やCSS3まで…本当に大変ですよね。 特に最近はReactやVueなど、 コンポーネント指向 のWebシステム開発が発展を遂げています。Web Componentsなども含め、流れを見てるとおそらくWebはこのコンポーネント指向に向かい、しばらく進んでいくのだろうと

こんにちは、 UXデザイナーの @yuh_iw です。 この記事は NTTコミュニケーションズ Advent Calendar 2017 の23日目です。 すべては最高の体験のために 弊社では、ようやく社内にUXデザインという言葉が浸透し始めていますが、 実態はUIと共に語られることが多いです。（実際は違うよ） とはいえ今回はUIを作るために私達がいつも行っていることについて記載します。 どうやってUIを作っていくのがよいか とにもかくにも、ユーザーに対する検証と学習をくり返すことです。 最高のUI=カッコイイUIではありません。アーティスティックなUIでもありません。 UIにはユーザーがいるので、ユーザーが使いやすいと思わなければならないのです。 そのために、使ってくれそうな人に、検証していく必要があります。 検証するためにはいくつか方法がありますが、 本稿ではUIプロトタイピングを行う

Best selection of Single page Website examples for your inspiration... Read more A single page website is one that fits on a single page. Single page websites are fully loaded in the initial page load or page zones are replaced with new page fragments loaded from server on demand, making the experience more continuous and fluid for the user. Single page websites became a trend recently, mostly amo

Site & Landing Page Inspiration Get inspired by the best landing page designs on the web. Section & Component Examples A growing list of landing page components from hundreds of websites

問題意識エンジニアのタイプを分けるとき、大雑把に「サービス志向」と「技術志向」みたいな分け方をすることが、僕の周りではよくあります。 個人的にはこの分け方は必ずしも良いものとは言えないと思います。少しエンジニアのことをサービスと距離のある人種として捉えてるように感じるからです。 技術志向だからってサービスのことを考えてないということではなく、「よりセキュアな技術を採用する」「効率的で安全なデプロイができるフローを構築する」などなど、技術向上を通じてユーザー体験をよくしよう、としているはずです。 ただ、デザインを良くしたり読み込みスピードを早くしたりなど、「目に見える範囲で改善する施策」を考え、実行しなければ、プロデューサー的な人からすれば「何やってんだろうな〜」と、エンジニアはブラックボックス的な人に見えてしまうこともあると思います。 じゃあ他のアプリをいじってみたりして、サービス勘みたい

モバイル向けナビゲーションデザインには、さまざまな形やスタイルが登場しています。すべてのナビゲーションメニューが同じ構造であれば、ユーザーにとっても直感的で分かりやすいかもしれませんが、現実はそれほど単純ではありません。 独自の問題を抱えたモバイルアプリは、ナビゲーションメニューのデザインによってそれらの問題を解決することもできます。たとえば、７〜8つほどの主要メニュー項目がある場合はおそらくハンバーガーメニューを採用し、３つほどのメニュー項目の場合はタブバー形式を実装するかもしれません。 デザイナーが製品やユーザーのために最適化したナビゲーションメニュー設計では、クリエイティブで画期的なデザインがいくつか見られます。今回は、ナビゲーションメニューを作成するときに参考にしたい、革新的な実例サンプル例をまとめてご紹介します。 ハンバーガーメニューが進化中！2018年に押さえておきたい最新トレ

by Michael Horton | Co-Founder, CEO & Head of Product at Slate We have been living in a world of ‘clean and minimal’ for quite some time, so what’s next? Over the last several months, some of the leaders of innovative design have taken ‘minimal design’ to the next level. Facebook, Airbnb and Apple have followed a similar blueprint to simplify prominent products in a way that reflects this new tren

いつもSNSで自由な発言をしているわたしですが、フリーランスのデザイナーとしていくつか「発言に気をつけている」ことがあります。今日はそのお話です。 気をつけていること 「やりたいこと」を発言すること 「発言がじぶんの価値を下げる」こと 「しなきゃいけない」に注意すること 「やりたいことを」発言すること 最近よく「やりたいことは口に出したほうがいい」という話を聞きます。それは半分「その通り」、しかし半分は「こわい面もある」というのがわたしの感覚です。 例えば、フリーランスのデザイナーが「アプリのデザインやりたい」と思ったとして、口に出しているだけでは叶うことは少ないでしょう。じぶんが「どんなスキルなのか」を公開しておかないと、単なる「絵空事を口にする人」になってしまうことにもなりかねません。 わたしは「イラストの仕事をしたい」とかねてから発言もしてきましたが、たとえプライベートの落書きであっ

Wordcamp Tokyo 2017で発表したプレゼンテーションです。 動画： https://wordpress.tv/2017/09/28/yutaka-sekiguchi-%E3%81%BF%E3%82%93%E3%81%AA%E3%81%A7%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%80%81%E3%81%82%E3%81%AA%E3%81%9F%E3%82%82%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/ -- WordCamp Tokyo 2017 https://2017.tokyo.wordcamp.org/ hanarenoheya http://www.hanarenoheya.com/

ぱっと見ただけではなかなか気がつかないような、ディテールにこだわった素晴らしいデザインのアイデアとテクニックを使ったUI要素を紹介します。 最近のWebサイトで見かけるUI要素がたくさんあり、すぐに次のプロジェクトに役立つと思います。

iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ

表示中のページから http://ascii.jp/elem/000/001/430/1430596/amp/ にリダイレクトしようとしています。 このページにリダイレクトしないようにする場合は、前のページに戻ってください。

表示中のページから http://technical-creator.com/airbnb-react-sketch-app/amp/ にリダイレクトしようとしています。 このページにリダイレクトしないようにする場合は、前のページに戻ってください。

（画像：Google Design） “マテリアルデザイン”とは、2014年にGoogleが提唱した、UI/UXを軸とした概念です。単純にデザインを指すだけでなく、開発技術や設計、アイディアや試みなどを総合してマテリアルデザインと称します。 Googleがマテリアルデザインのガイドラインを発表して以降、Googleが開発するandroidを中心に様々なマテリアルデザインが生み出され、目にすることも多くなってきました。しかし、この“マテリアルデザイン”を明確に説明できる人は少ないです。 “マテリアルデザイン”は、ユーザを第一に考えた、参考になる概念を数多く提唱しています。今回は、マテリアルデザインとは何なのか、その特徴と他のデザインとの違い、便利なフレームワークを紹介します。

始めの一歩としての色共有 ひとりのデザイナーに頼らず、チームで運用できる体制を作るためにも デザインシステム は有用なツールです。しかし、様々な UI コンポーネントと決まりごとが揃ったものを作るのは骨が折れる作業です。デザイナー（もしくはエンジニア）が独自で作って「さぁ使いましょう」と公開しても、使ってもらえるとは限りません。また、デザインシステムをどこで共有して、どのように使われるのかも考慮しなければならず、他社の真似事では済まないこともあります。 作る前から課題が山積みでなかなか手が出せないかもしれませんが、何か始めなければゴールに辿り着くことはありません。そんな現場でデザインシステムを作る場合、色から始めることをオススメしています。 色なんて単純なところは出来ていると思う方は多いと思います。デザイナーであればパレットにしてまとめているでしょうし、エンジニアであれば色は変数にして整理

Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で

こんにちは、戦略人事クラウド「HRMOS（ハーモス）」でUIデザイナー＆フロントエンドエンジニアを担当している庄です。 ビズリーチのデザイナーは、面白いと思ったサービスや新しいデザイントレンドなどを、社内で積極的に共有したり、ディスカッションしたりしています。その中の一部をこちらのデザイナーブログでシリーズ化して、今回からご紹介したいと思います。 「Design Fetch & Pull」というこのシリーズのタイトルは、たくさんFetch（取得）し、良いものをPull（更新）してデザインにコミットしたい、そんな意味を込めました。そして、その記念すべき第一回は、特盛りでお送りしますので、どうぞ楽しんでご一読ください。 #サービス #解析 まるでユーザーの画面を録画したようなアクセス解析サービス。マウスの細かい動きまで再現され、設定はGoogle Tag Managerと連携するだけ。マウスの