jtk

Vue.js でクイズをつくる

f:id:jotaki:20190212100544p:plain

結構前からやってたような気がするクイズの実装一旦できたので内容まとめようと思います。

GitHub Pages: https://yuheijotaki.github.io/vue-quiz/
GitHub: https://github.com/yuheijotaki/vue-quiz

機能

  • JSONから設問情報(設問テキスト/選択肢/解答など)を取得して描画
  • 回答形式は単数(ラジオボタン)と複数(チェックボックス
  • 答え合わせボタンでスコアと解答を表示

設問のJSON

READMEにも書きましたがこんな感じで調整しながら落ち着きました

[
  {
    "id": 1,                // [Number] question ID
    "queText": "text",      // [String] question text
    "ansType": "single",    // "single" or "multi"
    "ansCorrect": ["A"],    // [Array(String)] correct answer. If 'ansType' is "multi", specify like ["A","B"]
    "ansChoice": {          // [String] choice answer text
      "A": "answer A",
      "B": "answer B",
      "C": "answer C",
      "D": "answer D"
    },
    "ansCommentary": "text" // [String] answer commentary using HTML tags
  },
  {
    "id": 2,
    ...
  }
  ...
]

ハマったこと

いろいろあった気がしますが、コンポーネントの構成はあらかじめ紙に書いて進めても後で設計し直しがありました。

また設問の描画(components/Question.vue)、解答データの取得(components/Answer.vue)で一覧取得するのに同じメソッド使ってたりするのですが、うまくまとめたりできるんだろうなと思いつつ書き方わかんないなーと思って冗長なところが多々ある気がします。

残り課題

  • リセットボタン(ページ最下部)の追加。全回答リセット機能がほしい
  • 線 or 円形のプログレスバーの追加。回答状況の進捗を確かめられる要素を入れると親切な気がする
  • LocalStorage で質問リストの解答を保存。リロードで一瞬で消えてしまうので
  • 複数時 質問リスト 選択肢上限(jQueryチェックボックス不具合(前選択していた上限が引き継がれてしまう)
  • (そもそも)設問1問ずつでページ遷移する形のほうがよい?

とかですかね。基本の回答 → 答え合わせはできたのですが細かい所でちょくちょく改善したい点はあります。

これから

CLI使うとき、ビルドインにするとき、Router 使うときなどいろいろな導入の方法あると何がベストなのかが実際に触っている段階でも分からないので触れる機会を増やさなきゃなぁと思います。
SPAから逃げてきたので次回はページ遷移する要件もった何かを作りたいと思います。

【読書メモ】はじめてのUIデザイン

はじめてのUIデザイン を読みました。

サイトに書かれていますが対象読者は、

  • UIデザインについて知りたい、勉強したい人
  • UIデザインの経験はあるが、基本から再入門したい人
  • 開発しているアプリ、サービスのUIデザインをしたいエンジニア
  • UIデザインを理解したいディレクター

ということで自分はUIデザインするわけではないですが、著者の人の感じから最近の動向なども込み込みで理解できるのでは、と思って手に取りました。

f:id:jotaki:20190815083838p:plain

PEAKS というクラウドファンディングで技術本を出版しているレーベルから出ているもので、サイトからPDF or 物理本を購入する形です。自分は物理本にしました。

概要

PC/アプリをはじめとしたオンスクリーンデザインの歴史(iPhone登場の2007年あたりから)、領域で活動するにあたり関わることの多いメンバーの役職の説明などベーシックな内容からはじまります。
次にUIコンポーネントといわれるもののひとつひとつの説明、情報設計について、アプリ/Webそれぞれのデザイン手法についてが続きます。
5章でサンプルの題材をもとに実際にUIデザインに落とし込む流れの解説、その後UX的な話、最後はサービス全体に目を配るといった広いデザインについて書かれています。

ポイント

気になったコンポーネントやツールの紹介などはキリがないので印象に残ったところだけ

5-5 「UIデザイン」の意味を改めて考える

UIは「ユーザーインターフェース」の略ですが、あなたが作ったUIデザインはまだユーザーに使われていないはずです。そうです。ツール上でUIを作っただけでは、それは「インターフェイスデザイン」であって「ユーザーインターフェースデザイン」ではないのです。
...
UIを作るまでのフェーズ、情報設計のさらにその前には「そもそもなぜサービスを作るのか」「そのサービスは誰のために作るのか」「その『誰か』は存在していて、サービスを使いたいと思うのか」といった視点があるはずです。UIを作った後のフェーズは「作ったUIは本当に使われるのか」「作ったUIをどう改善していくのか」といった視点です。

7-1 サービスをつくる

何のためにサービスを作るのか
サービスは企業が売上や企業価値を上げるために作ります。ユーザーに価値を与えた結果、利益を生み出す製品を作るのがデザインです。

本当は人や目的によってそれぞれでもいいのかもですが、この本で扱うデザインの定義に関してはこうですよって感じでしょうか。

良かった点

  • UIデザインの基礎的なレベルの考え方、手法、運用、ツールなど広い知識が得られた
  • 最近のデザイナーが利用しているツールの紹介があったので、ある程度スタンダードが分かった気がする(Sketch / Figma / Sketch は仕事で使っているか認知はしているが Abstract などは知らなかったので)
  • 資料や紹介されるツールが新しいものであること
  • 関連資料(Webのページや書籍情報)が豊富でQRコードつきでアクセスしやすいこと

惜しかった点

  • 物理本は2章の一部分しかカラーでなかった(PDF版はオールカラーなのかな)

まとめ

自分がデザインしていたのは7〜8年くらい前なので、単純に今求められることは領域が広がったなあと思いました。
でも広がったというより当時の自分が気づいていないだけで、ポイントにあげたようなことに関して目が向いていなかっただけなのかも知れません。
エンジニアとうまく連携するのも、レイヤー(コンポーネント)の命名規則を考えたりするのもデザイナーのスキル(価値)になって大変だなと..

でもデザイナーとエンジニアも同じ目線で、作りやすさではなくユーザーや未来に目を向けることは同じ部分もたくさんあるなと思って勉強になりました。

【読書メモ】インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

インタフェースデザイン/Webデザイン分野で評価の高めな本ということで、インタフェースデザインの心理学を読みました。  
続編として 続・インタフェースデザインの心理学、派生本として インタフェースデザインの実践教室 があり、「〜の心理学」は Susan Weinschenk さんという行動心理学者(behavioral psychologist)の方が書いているものです。

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

 
概要

UI/UX関連の本ではありますが、筆者の得意分野的に一般的な心理学や行動学からそれを踏まえた上でインターフェイスやUXデザインをするにはこういうアプローチをしたほうがいいですよ、という流れのポイントが10章100ポイントでまとめられています。

1章の「人はどう見るのか」から、「人はどう〜するのか」形式で「読む」「記憶する」「考える」「注目する」「ヤル気になる」のかと進んでいきます。 前半は実作業でデザインする人にはより実践に結びやすい内容と思います。

後半は心理学的な感じ方の話がメインで、社会的な結びつき、感情、間違えや決断に関しての章が続いていきます。

ポイント

印象に残った点を何点か引用します。

002 対象の「あらまし」をつかむのは中心視野より周辺視野の役目

見えてはいないものの直視はしていない視野を周辺視野というが、対象の全体像を掴む際は中心視野より周辺視野を使ってさまざまな情報を補完することが多い。

006 人は過去の経験と予想に基づいて画面を見る

左から右に読む言語を主言語としている人であれば、コンピュータの画面も左から右に見る傾向がある。  
とはいえ、ブラウザの左上の角(ロゴやナビゲーション)から見始める人はほぼいなく、端は避けて画面の中の方をみる傾向がある。

011 男性の9%、女性の0.5%が色覚異常

これはよく言われていることですがメモとして

013 大文字がもともと読みにくいものであるという説は誤りである

(英語の場合) 単に読み慣れていないだけで小文字より大文字のほうが読みづらいということはない。  
人は文章を読むとき、短い時間の静止を挟んで(これを「固視」という)1度に約7〜9文字分ジャンプする(これを「サッカード」という)を繰り返す。  
サッカードの移動で実際に知覚している範囲はその2倍で、これは周辺視野を利用している。

016 文字の大きさは理解度を左右する

エックスハイトが大きいと文字は大きく見える  
同じ font-size: でもフォントファミリーでサイズが違うように見えてしまうのはこれが要因ぽいですね

020 一度に覚えられるのは4つだけ

いくつかの情報のまとまり(チャンク)に分けてグループ化することで3つあるいは4つの数字のチャンクを覚えることができる場合がある。  
例)電話番号 090-1234-5678

024 記憶は思い出すたびに再構築される

記憶は思い出すたびに再構築される。また後になって起こった出来事が、前にあった出来事の記憶を変えてしまうことがある。

028 心的な処理には難しいものとやさしいものがある

フィッツの法則 を使えば科学的な基準を元にボタンの適切な大きさを決めることができる。 速さ、正確さ、距離の間には関係があるということ  
参考: フィッツの法則

029 人は30%の時間はぼんやりしている

ある作業を行っているのに、いつの間にか作業とは関係のないことを考えている状態 = マインドワンダリング

031 人はシステムを使うときメンタルモデルを作る

Apple 製品のインターフェイスiPhone / iPad を使ったことがある人はその製品を使って何かしらの作業をすることの「メンタルモデル」を持つ。

038 人は「フロー状態」に入る

何もかも忘れて没頭してしまい、他のすべてから離れ、時間の感覚も変わり、自分が何者でどこにいるのかも忘れてしまう状態をフロー状態という。 ゾーンと同じぽいですね。 
自分が好きなゾーンに入る方法は
『ゾーン』に入る方法

039 文化は考え方に影響する

(牛と背景の写真) 西洋人に写真を見せると、前景にある中心的なものや目立つものに注目しますが、東洋人は写真の状況や背景に注目する傾向があります。

飛ばしすぎて前半だけになってしまいましたが、ざっくり大事そうで今後も覚えておきたいことはこんな感じです。

良かった点

  • 心理学というものにほぼ触れた経験がなかったので、これまでなんとなく断片的に聞いたことのあった内容を深く知ることができ、人の本質的な習性や欲求的なところからくるものを仕事に落とし込むことに対して興味が持てた。 ただその落とし込み方が一番むずかしい気もした。
  • 0 → 100 を作る際に参考になるというよりは、80あるものがなぜそうなっているのか、100にするためにはどうするべきかという所で役立ちそうなことが多かった。

惜しかった点

  • インターフェイスやUXデザインをするにはこういうアプローチをしたほうがいいですよ」という点はだいたい各ポイントに書かれているのですが、それの量があまりないこと。
  • サンプルに掲載される図が古めなこと。

まとめ

デザインの実作業をする人にも向いている本だと思いますが、より向いているのはより上流のディレクション業務やマーケティング的な業務する人にも向いている内容と思いました。

なかなか実務でどう使えるかは難しいかもしれませんが、頭にほんのり残っているものから使っていこうと思います。

2019年前期のWebサイト

2019年で気になったWebサイトをまとめておきます。
いろいろな観点ありますが、デザイン/実装ともに好みのものです。

株式会社オリエントコーポレーション

f:id:jotaki:20190804095257p:plain コーポレート/グラデーションやトーン/表示の動きやマウスオーバー/情報整理
https://www.orico.co.jp/company/

KARTE(カルテ)

f:id:jotaki:20190804095124p:plain プロダクト/アイコン/きれいな Noto Sans の使い方
https://karte.io/

株式会社テクニカルパートナー

f:id:jotaki:20190804095226p:plain イラスト/わかりやすさ/企業規模
https://tec-p.co.jp/

野村證券 2020年度新卒採用ホームページ

f:id:jotaki:20190804095235p:plain ストーリー/世界観/Vue.js
https://www.nomura-recruit.jp/graduate/2020/

SUN-AD サン・アド

f:id:jotaki:20190804095208p:plain ブランディング・コピー/フォント・縦書き
https://sun-ad.co.jp/

THE FASHION POST

f:id:jotaki:20190804095057p:plain ウェブマガジン/タイポグラフィ・文字詰め・縦書き/記事カテゴリーの各色使い
https://fashionpost.jp/

よかよか市場 熊モットー

f:id:jotaki:20190804095309j:plain ECサイト/かすれやフォント
https://yokayoka-kumamotto.com/

もぐし海のこども園

f:id:jotaki:20190804095148p:plain アミューズメント/イラスト
http://mogushi.jp/

やっぱりアプリやWebアプリではなくて、Webサイトが好きだなあと思います。
THE FASHION POST は全部画像文字に見えるくらいに文字の扱いきれいでため息ものでした。

2019年7月 振り返り

結果

ブログ

目標:月 12 回(週 3 回)更新
結果:月 7 回 更新

読書

目標:月 1 冊
結果:月 0 冊

反省点など

SAA取れず、ブログも読書も目標達成できず。  
習慣もないがしろになりつつある。

来月に向けて

デザイン関連の本2冊読む。 
Vueのクイズももう少しなので完成させる。  
暑いですが体調に気をつけて徐々に戻していきたいとおもいます。

Loading Placeholder いろいろ

オリジナルは不明ですがWebやアプリでよくある画像とテキストの読み込み前に表示されるグレーのプレースホルダー、
Loading Placeholder や Content Placeholders というふうによばれているんですね。

実装する必要がありそうなのでPC(Webブラウザ版)にて各サービスをキャプチャしてみました。
思ったよりもPCだとあまり実装されていなくてアプリ寄りの実装が多いのかなと思いました。

Backlog

f:id:jotaki:20190729094810p:plain

アニメーションなし、角丸ラインスタイル

Dribbble

f:id:jotaki:20190729094816p:plain

サムネイルクリックした際のモーダル表示時にでます
ラインはグレーの濃淡アニメーション、画像エリアはボールがバウンドする

Dropbox

f:id:jotaki:20190729094821p:plain

ファイル一覧のページ
アニメーションなしっぽい、コントラスト薄め

Facebook

f:id:jotaki:20190729094828p:plain

一番メジャーっぽいやつ
コンテンツ全体にラインではなく3行固定、画像エリアはブランク

Instagram

f:id:jotaki:20190729094833p:plain

PCのおすすめユーザー箇所
スマホは画像部分がほやけ→くっきりなる

Qiita

f:id:jotaki:20190729094836p:plain

Qiitaはサイドバーのおすすめ記事やランキングなるけど記事一覧はならないっぽい
(読み込み早いだけかも)

Slack

f:id:jotaki:20190729094839p:plain

読み込み時にメッセージが表示されてたときは、もう少し派手に(わかりやすく)プレースホルダーがあった気がしますが、
いまはユーザーごとに読み込みされるときにこんな感じになる

Vue CLI UI

また クイズアプリ作っているのですが心が何回か折れているので、気分転換に Vue CLI UI をさわってみました。
https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui

f:id:jotaki:20190726103818p:plain

だいたい参考にしたのは下記の記事。
https://qiita.com/isihigameKoudai/items/eee3eb6a435675fdfd73

$ vue --version

で 2.x 系だったら

$ npm install -g @vue/cli

で3系インストール。

$ vue ui

で起動するとGUI画面が http://localhost:8000/project/select で開く。
大枠の管理画面(Vue プロジェクトマネージャ)と、プロジェクトごとの管理画面(プロジェクトダッシュボード)がある感じ。

ちょこっと触ってみた感じ設定わりと細々できて良さそうですね。できなくてもこれまで通りコマンド打てばいいので使えるところだけつかったらいいのかなと
タスク(serve/build/lint)もGUI上からできて通信予想速度?やファイルサイズも出るので便利っぽいです。

f:id:jotaki:20190726103830p:plain