memo sooup

気になったことのメモ書き用。完全に自分用メモ。デザイン、web、アート、考え方など。

[memo-sooup]

フォームはラベルの配置場所で使いやすさが全然変わる！ユーザーが利用しやすいフォームを徹底考察

あなたのフォームは、ユーザーが簡単に利用できますか？ もし簡単でないなら、フォーム入力を完了するのも予想以上に難しいとも言えます。 ユーザーが入力しやすく、そして入力内容の確認も簡単なフォームについて

[memo-sooup]

効果的なフォームをデザインする：構造、入力、ラベルおよびアクション | デザイン | POSTD

画像の出典：form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために*フォームに*記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な*種類の操作*であるからです。事実、フォームは目的を達成するまでの*過程における最後のステップ*と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測（アイトラッキング）、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 ##フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 * **構造**。フィールドの順番、ページの外観、各フィールドとの論理的な関連付けが含まれます。 * **入力フィールド**。テキストフィールド、パスワードフィールド、チェックボックス、ラジオボタン、スライダ、そして他にもユーザ入力用に設計デザインされたフィールドがあります。 * **フィールドラベル**。対応する入力フィールドの意味をユーザに教えるためのものです。 * **アクションボタン**。ユーザがこのボタンを押すとアクション（例えば、データの送信など）が実行されます。 * **フィードバック**。フィードバックによってユーザは入力結果を理解します。多くのアプリやサイトはフィードバックの形式としてメッセージを使い、このメッセージがユーザに結果を伝えます。肯定的（フォームがうまく送信できたことを示す）または否定的（「不正な値が入力されました」）な場合があります。 下記のような構成要素が含まれる場合もあります。 * **入力支援**。フォーム入力時の方法を説明するヘルプ。 * **バリデーション**。ユーザのデータが有効かどうかの自動チェック。 この記事では、構造、入力フィールド、ラベル、そしてアクションボタンについて記述します。 ##フォームの構造 *フォームとは対話です*。対話が一般的にそうであるように、2者による論理的なコミュニケーションによって成立します。この場合はユーザとアプリです。 ###必要事項だけを入力させる

[memo-sooup]

水曜日のカンパネラ OFFICIAL SITE

http://www.wed-camp.com/

ぐにゃぐにゃ感が面白い。

コムアイさんの独特さを表したようなぐにゃぐにゃに溶ける表現

スマホは振ると顔がバラバラになる

[memo-sooup]

TABLE MANIA | 絵になる食卓をつくるweb magazine

(photo text by yu nishimura) こんにちは、フォトグラファー／スタイリストの西村有です。 皆様、絵になる食卓づくり、楽しんでいますか？ 「食卓づくりと言っても、一人暮らしだし..

生活の参考になるかも

[memo-sooup]

http://www.homes.co.jp/map/

結果を見ながら検索条件を変えたいときは、インラインスクロールもありかな。画面幅によるけど。

[memo-sooup]

Creative Commons Attribution 3.0 Unported License.

[memo-sooup]

http://www.invisionapp.com/

inVisionのロゴダウンロードするには、左上のロゴを右クリックすると（保存しようとすると）ダウンロードされる。

普通のクリック（左クリック）だとトップページに飛ぶ。

ブランドアセットここにあった（webと印刷用のロゴも）

https://projects.invisionapp.com/boards/BX4P1DY5H46R

[memo-sooup]

Trusted by millions, Basecamp is the leading web-based project management and collaboration tool. To-dos, files, messages, schedules, and milestones.

Basecamp Press Resources

ロゴは、プレスキットの中にある。ダウンロードリンクはページの下の方。

[memo-sooup]

Brand Guidelines | Slack

[memo-sooup]

きみはバルミューダほどシズるWebを設計できるか

Web制作者の視点から、バルミューダ ザ・トースターのWebサイトがどのように製品の価値を表現し伝えているか、そのユニークさを（勝手に）紐解きます。…

[memo-sooup]

Act of Love

http://www.actoflove.jp/

動きと音楽が面白い

鳥をピクトで表している

「なんだかかわいい」「なんだかおしゃれ」な感じ

[memo-sooup]

西尾維新公式サイト

西　 尾　断 維　片 新　小 公　説 式　公 サ　開 イ ト

http://ni.siois.in/

文章をクリックした時の文字の動きが面白い。

[memo-sooup]

浅草九倶楽部

http://www.asakusa-kokono.com/

文字の動きが面白い。

こういうサイトの制作プロセス知りたい。

[memo-sooup]

http://run4tiger.com/

マウスを小さな粒に当てると動く

[memo-sooup]

英語勉強系いろいろ

English Hacker

日本の英語学習者のための情報ポータルサイト

http://english-hacker.jp/

ほぼ毎日　英語学習日記　～ 英語holic ～

http://kyonenglish.blog98.fc2.com/

Biscuit（スマホアプリ、クローム拡張）

単語を選択コピーするとスマホの通知バーに意味が出る。

クローム拡張も出来たらしい。

http://getbiscuit.com/

[memo-sooup]

制作ツールいろいろ

Sketch

http://bohemiancoding.com/sketch/

【スライド】Sketchで変わるワークフロー

http://www.slideshare.net/asamieee7/sketch-50764516

Zeplin

https://zeplin.io/ Sketchで作ったものの余白とか色とかが測れる。指示書てきな。

PhotoshopだったらExtractかなあ

https://helpx.adobe.com/jp/creative-cloud/help/extract-css-images-psd-files.html

http://codezine.jp/article/detail/8493

実装側にとって分かりやすくて、デザイン側でも指示書の負荷が少ない方がいいよねえ…。みんなどうしてるんだろ〜？？

[memo-sooup]

日経電子版×Sansanアプリ開発プロジェクトの資料など

「成功への道〜アプリ開発者勉強会Vol.2」 〜日経電子版ｘSansanがビジネスアプリ開発の裏側を公開しちゃいます〜

というイベントがあったようで、その資料が公開されていたのでまとめておく。参考にしますッ!!

確実に良くするUI/UX設計 from Takayuki Fukatsu

「大量の仮説とアプローチを考え総当りで潰す」

…ですよね。最近のうちの会社もこういう感じかも。

スライドとはそれるのだけど、自分たちでやってみて私が思ったのは、仮説の単位（大きさ）が難しいなということ。あと仮説が完璧すぎるのも検証するのに適さないかもしれないと感じた。

見た目というのは結構見た人に影響をあたえると思う。需要があるかどうかを知りたいだけなら装飾的なものは極力無くてもいいのではとかとか。装飾があると、好きか嫌いか好印象かどうかというものが第一に入ってきてしまうので、本来のそのものの良さとかの検証にならないのではないかなあ…という気がしています。

仮説と検証が大事というのはその通りだと思う。しかしやってみると難しくて、こういうスタイル事態も繰り返しやっていくことで精度が上がっていくのかもしれない。鍛錬だ!!