株式会社リクルートテクノロジーズ UX デザイナー。楽天株式会社、株式会社コンセントを得て現職。人材領域のサービスデザインに従事。ユーザエクスペリエンス設計担当者が集まるコミュニティ UX Tokyo 主宰。 コラボレーションツールの発展と課題 UXに携わる方であれば、UXデザインないしはサービスデザインに関するコラボレーションツールの1つや2つをこれまでに利用した経験があるのではないでしょうか? UXデザインやサービスデザインのプロセスが多様化し、複雑化する中で我々UXデザインに関わる人間の負荷を軽減してくれる大変便利なツールがオンライン、オフライン問わず次々と登場しています。著者はこれまでにプロトタイプを強みとしたオンラインツール「UXPin」や紙上のテンプレートを無償で公開している「Service Design Toolkit」などを利用してきました。 ところが、どれも長くは続きませ
デザイナーを中心に、UIデザインに関わる人すべてを対象とするコミュニティ「UI Crunch」は4月14日、東京・渋谷ヒカリエにあるディー・エヌ・エー(DeNA)のさくらカフェにて、8回目となるトークイベントを開催。「UIデザインに求められる実装スキルと考え方とは?」をテーマに、アプリ・サービス開発の最前線でデザインに関わる5人によるセッションが行われた。本稿ではその様子をレポートする。 デザインとエンジニアリングのベーススキルを身に付け、垣根を越えることが重要 最初のスピーカーは、株式会社サイバーエージェントでチーフクリエイティブディレクターを務める佐藤洋介氏。 株式会社サイバーエージェント チーフクリエイティブディレクター 佐藤洋介氏 佐藤氏は「市場でネイティブアプリの高品質化が進んでおり、アプリ開発では完成度の高いデザインを考慮したエンジニアリングが必須になってきている。競合優位性を
Dockerを使う際にはターミナルを使うか、KitematicやPanamaxといった専用ツールを使って管理するでしょう。GUIの操作はしやすいとは言え、わざわざGUIのソフトウェアをインストールするのに若干の抵抗があるかも知れません。 今回はもう少しカジュアルにDockerを使いこなせるSimple Docker UIというソフトウェアを紹介します。こちらはChromeアプリとして提供されているので、より手軽にインストールできます。なお、Dockerはあらかじめインストール済みであることとします。 DockerのRemote APIを利用します Simple Docker UIはDockerのRemote APIを使って操作します。WindowsやMac OSXの場合は docker-machine ip dev などと実行してあらかじめIPアドレスを覚えておいてください。 Simple
あらためてなるほどな、と思えるいい記事でした。 【これからのスキル】デザイナーとエンジニアの境界線がどんどん無くなる | freshtrax | btrax スタッフブログ 自分にも重なる部分があると思って経験と雑感込みで書いてみた、毎週水曜更新のデザインラボbyツクロア、今週私のターンではデザイナーがコードを書く意味についてです。 一枚絵では通用しないアプリデザイン 某携帯電話メーカーからAndroidアプリデザインの依頼があったときの話です。 電話着信画面や起動直後の待受ロック解除のデザインを含め、使い心地や操作感から画面構成まで一緒に考えてもらえるデザイナーを探しているということでした。 担当者いわく「静止画だけではアプリデザインの良し悪しが決められないんですよ」という話から始まり、では「実際うごくデザインモックを作りながら一緒に考えましょう」という作業の流れを提案して検証からリリー
クックパッドの、その「ユーザーファースト」は、どのようにして推進されているのだろう か。ユーザーファースト推進室の倉光 美和さん(HCD-Net認定 人間 中心設計専門家)に聞いた。 クックパッドは、日本最大の料理レシピサービスであるとともに、「ユーザーファースト」を最も重要な価値観と位置付け、徹底してユーザーの方と向き合いながらサービスを展開している企業だ。 サービス産業生産性協議会が発表する「JCSI(日本版顧客満足度指数)」の2015年版では、インターネットサービス部門で、Google や Yahoo! JAPAN を上回り、全指標で1位を獲得、さらに顧客満足度では3年連続で1位など、ユーザーから高い支持を集めている。 ――ユーザーファースト推進室というのは、どのような部署なのでしょうか クックパッドは社員の行動指針として「ユーザーファースト」であることを掲げています。「提供している
Subscribe Get Latest Updates on Designing, Development & Freebies. No Spams! Promise :)
先日、エウレカさんとグッドパッチのデザイナーで第一回合同勉強会を開催しました。今回のテーマはワイヤーフレームです。この勉強会は、ワークショップを通してナレッジの共有をし合い、個々のデザイナースキルを上げる目的があります。エウレカさんのレポートはこちらです。合わせてご覧ください! 1.ワイヤーフレームを作る意味とは ワイヤーフレームを作る意味についてお話をしてくれたのは、エウレカ原さんです。案件を進めるときにまずすること、ワイヤーフレームはなぜ必要か、ワイヤーフレーム制作で意識するポイントについて解説していただきました。 ワイヤーフレームを書く前に 案件を進めるとき、まずすべきことはプロダクトの目的とゴールの再確認です。 最終的に作っているものの方向性を見失わないようにするために、 何が目的でそれを実装するのか? なんで必要なのか? それを作ることによって何を解決するのか? を考える必要があ
本記事では、関連したサービスを運営されている方に共通する悩みや課題を発見することを目的として、話題のサイトやモデルケースになりそうなサービスでユーザビリティテストを行った事例を共有します。 今回は、「一太郎」や「ATOK」で有名な株式会社ジャストシステムの転職サービス【ピタジョブ】を対象に課題発見事例をご紹介します。競合性の高い領域において、サービスの特徴をユーザーに認知させるには何が重要かを調査しました。 調査結果では、サービスの強みを打ち出すためにどんなサイトでも気をつけられる以下の課題点が発見されました。 ▼対象サイト ピタジョブ | ぴったりが見つかる転職・就職・求人情報サイト \ナイルのサイト改善提案の紹介はこちらから!/ 今回のユーザビリティテストの発見点 発見① ユーザーは自分の求めている情報を的確に・迅速に手に入れることに“しか”興味が無い 発見② ユーザーと同じフレーズや
Various icon animations made with mo.js, a powerful motion graphics library by Oleg Solomka. Inspiration comes from the Dribbble shot “Like Animation” by Daryl Ginn. Maybe you’ve already stumbled across mo.js, a very powerful motion graphics library for the web made by Oleg Solomka. You can do tons of awesome things with it and today we’d like to share our take on some icon animations using the li
Designing for many platforms Facebook supports a diverse audience around the world and an equally diverse set of devices. To emphasize that in our design mocks, we redrew a range of devices to show the global diversity of the people using our products. Each device comes with a bitmap of the device (with and without shadows) and the original Sketch file for that device. We'll release different cate
Saying farewell to Pixate. When we launched Pixate, our mission was to change the way mobile apps were prototyped. We joined Google just over a year ago to continue our mission, and to pursue a broader vision of changing the way products were designed and built. While a lot of the ideas we’ve been developing could work inside the Pixate framework, we believe we can have a larger impact if we move
ハンバーガアイコンアニメーションの実装 HTMLは今回spanを3つで構成しました。 これで色々ご紹介していこうと思います( ˇωˇ)☝ <div class="icon-animation type-1"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> お次にアニメーションの実装をご紹介します。 CSSは全てSassの構造で書いております( ˇωˇ ) 1. よくみかける動き 動き出す前の傾きとバーの位置をtransformで調整をします。 こちら、以前ご紹介した「スマホに特化したアコーディオンメニューを作ってみた」のアイコンも同じような実装をしております( ˇωˇ)☝ 押す前 .type-1 { span { transition: all 0.3s;
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時(メニューが展開しているときなどのアクティブ時)のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く