デザインの参考になる！最近のスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ最近のスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。 デザインのアイデアを探している時に、ブックマークしておくと便利ですね。 Mobbin 150種類以上のiOSアプリ、8,000パターンのUIがまとめられたギャラリー。一つのアプリで、さまざまなUIが収録されているので、非常に便利です。スクリーンはiPhone X対応で、気に入ったアイデアは保存することもできます（要サインアップ）。
『How to Get Startup Ideas』 - いかにスタートアップのアイデアを得るか - Yamotty Blog
この記事は2012年11月にポール・グレアムが自身のBlogへ投稿した『How to Get Startup Ideas』というエッセイを訳したものだ。ポール・グレアムはシリコンバレー最大の起業家養成スクールである『Y Combinator』の創設者であり、YCの卒業者にはDropbox, Airbnb, Heroku, Cruiseといった名だたるテック企業がいる。 YC卒業者たちの時価総額合計はなんと8兆円以上と見積もられる 本記事は急成長を目指す全てのスタートアップにとって「狙う打球の見極め方」を示したものであり、最も大事な視点が示されている。約2万字と非常に長く、またぼくの拙訳ではあるが、日本でも盛んになりつつあるスタートアップという働き方に対して関心がある、できるだけ多くの人に読んで貰いたいと思い翻訳に至った。もともと原文を読んでいたのだが、翻訳記事がほかに見つけることもできなか
もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
Appleがトップページで自動送りカルーセルをやめた理由
残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが！ 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか！？ 実は、このレイアウト（巨大ヒーローイメージと4つのフィーチャーボックス）が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると
トレタでの「slack」活用を紹介してみる - @hitoshi annex on hatena
おかげさまで、トレタもコツコツ導入実績を積んで、少しずつ会社らしくなってきました。 気づけばメンバーも20人を超えてオフィスの席が足りなくなり、恵比寿にもお引っ越ししました。（お引っ越しについてはまた別の機会にでも書きます） 会社には、その規模とかステージに応じた情報共有環境が必要になるんだと思うのですが、今回はトレタでのslack（チャットサービスです）の活用についてご紹介してみたいと思います。 たかがツール、されどツール。ツールが変わるだけで、仕事の仕方とかコミュニケーションの形もガラッと変わるんですよね。で、トレタもslackのおかげで仕事から会社の雰囲気まで、いろいろなことが大きく変わりました。 7月から全社で利用中 トレタでは、7月からslackを全社の標準チャットツールとして採用しています。今やチャットツールにも多種多様なサービスがありますが、帯に短しな感じでど真ん中にどんぴし
注目の「web接客」を可能にするチャットツールまとめ
しつこいようだが接客で大きくコンバージョン率をあげることができる。 (何倍にもすることが可能だ) 通販においてその手法はRFM分析を用いたアプローチや趣味趣向でセグメントしそれにあわせたメルマガ等が主流である。 未だ日本では珍しいがチャットを用いた1 to 1（ワントゥーワン）のWeb接客がアメリカや中国などで成果をあげている。 アメリカのライブパーソンが発表している改善数値は以下の通り。 ・コンバージョン率： 15〜30%増加 ・購入数： 10〜15%増加 ・収益： 全体収益が12〜25%増加 ・平均購入額：購入1件あたり35%増加 ・顧客満足度： 85%以上がサービスに満足と回答−リピーターが増加し、返品が減少 #電話やEメールでの問い合わせに迅速に対応し、サービスコストを削減することが可能。 では日本国内ではどのようなチャット提供会社があるのか、その比較をしてみたいと思う。 #スマホ
入力フォーム改善でCV率1.6倍！成果を上げる18のテクニック | LISKUL
たかが入力フォーム、されど、入力フォーム。 ユーザーが入力フォームに入力しているとき、もう気持ちは「購入します！」「申し込みます！」と決まっているはずです。 しかし、入力フォームが使いにくいために、せっかくの顧客をのがしてしまう可能性があるのです。 サイトへの流入はあるのに成果が上がらない・・・。 フォームPV数とコンバージョン数に差がある・・・。 そんな時には入力フォームを見直すべきかもしれません！ 入力フォームについて書かれている16の記事、サイトを参考に、結局、なにが重要なのか、基本と応用合わせて18のテクニックを厳選し、事例を交えてお伝えします。 入力フォーム改善の威力、条件を知ることで、成果を上げる入力フォームを作ることができるはずです。 失敗しない入力フォームを選ぶ！【LISKUL特集（2019年版）】CVR改善ツール一覧>> ※本記事は2014年7月29日に公開された記事をL
フラットデザインに似合うボタンが、スライダーを調整するだけで作れるサイト「2.5dBUTTON」 | ライフハッカー・ジャパン
疲れやすい、呼吸の浅さを改善。ストレッチポールは毎日使いたいほど気持ちがいい!【今日のライフハックツール】
グッドデザイン賞を獲得した7つのサイトから学ぶ、ウェブデザインの12のテクニック | LISKUL
photo by Robert S. Donovanウェブデザインを担当していると、星の数ほどある他のサイトたちに自社のサイトが埋もれてしまわないか、心配になりますよね。 そこで、ユーザーに評判のよいサイトを作るために、プロデザイナーたちから優秀だと認められたサイトデザインを参考にしてみるのはいかがでしょうか？ この記事では、2013～2011年の3年間にグッドデザイン賞に選ばれたウェブサイト7つから、自社サイトに活かしたい12個のデザインテクニックをまとめて紹介いたします。 受賞作品を参考に、ヒットするウェブサイトを作りましょう！ 参考：BtoB製造業のWebサイト参考事例9選と、ホームページ作成の3つのポイント グッドデザイン賞とは？1957年に創設された日本で唯一の総合的なデザイン賞で、毎年企業やデザイナーから40,000件以上の応募があり、よいデザインを示す賞として広く親しまれてい
レビュー：Android史上最高の" L"、初めてiOSの"触感"を超えた
Googleは6月26日より、開発者向けにAndroid OS最新バージョン「Android L」のプレビュー版を公開している。Nexus 5にインストールして数日使ってみたので、ユーザーが大きな変化を感じるであろう部分を中心にレビューしてみたい。 Android LをインストールしたNexus 5を起動した時の第一印象は、「新鮮味を感じない」ということだった。 デフォルトホームアプリはGoogle Nowランチャーであるため、Android 4.4 KitKatと同様にステータスバーと下部メニューが透過されている点は変わらず、一新される予定の各Google製アプリのアイコンも旧デザインのままだからかもしれない。ホームスクリーンをパッと見て分かるのは、下部のナビゲーションバーのデザインが変更されていることと、デフォルト壁紙が変わったことくらいだ。 しかし、少し触ってみれば、すぐに着実で大き
情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ
「Empty Data（またはEmpty Status）」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります（Webでの404に近いですが、少し違います）。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
成果につながるLP制作のノウハウ記事14選|初心者～上級者のお悩み別テクニック集 | LISKUL
世の中にランディングページに関する記述は無数に存在します。 しかし、情報量が多すぎて探している記事を発見することが困難だと感じている人も多いのではないでしょうか。 そんなあなたのために、過去リスクルに投稿されたランディングページに関する記事を「これから作りたい」「さらに獲得を伸ばしたい」などのステージ別にまとめてみました。 初めてのランディングページ製作や、既存ランディングページの改善の際には、ぜひとも参考にしてみてください。（参考：ランディングページ制作会社の一覧 ≫） ※ランディングページ改善に重要な要素を大きく4つに分け（ファーストビュー、ライティング、導線、その他のポイント）それぞれの項目で訴求ポイントのチェックが行えるシートを無料で公開しています。こちらもご参照ください。 新しくLPを作る方へ│成果の出るLPの作り方ランディングページは作り方次第で成果が2倍3倍と大きく変わります
ABテストでCVR改善に成功した海外事例まとめ15選！ | LISKUL
「海外ではABテストが盛ん」という言葉を耳にし、その内容が気にはなるものの、実際にそのノウハウや事例を外国語で仕入れるのは一手間だと、先送りにしてしまう人も多いのではないでしょうか。（かくいう私も「先送り」の日本代表です。） そんな皆様の一手間を解消すべく、海外のABテストの事例とその要点を日本語でまとめてみました。 普段から気になっている海外の事例を、どうぞサクッと日本語で仕入れちゃってください。 ※本記事は2014年5月19日に公開された記事をLISKUL編集部にて再編集したものです。 グローバルナビゲーションの削除とフォームの変形でCVR336％http://unbounce.com/a-b-testing/how-a-single-a-b-test-increased-conversions/ ・オリジナルページの特徴は、上部に分厚いグローバルナビが配置されていることと、右カラムに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ディレクターにもうれしい。Adobe XD用の日本語ワイヤーフレームUIキット「Wires jp」提供開始！ – Adobe Creative Station
CASH｜ポジティブな「お金」の表現
日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました！（たぶん） | BtoBサービスキューレーション Boxil（ボクシル）まとめ！
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Engadget | Technology News & Reviews
