前書き
久々の投稿です。
今回のWebアプリ
前回：リアル「クソ」WebアプリIWannaBeTheUNCHI
最初アクセスすると特段案内もなくまっさら…
突如映し出される自身の顔輪郭と💩
という感じでした。
それを、↓画像のように改修しましたので、その中での気づきについてまとめる記事です。
ユーザビリティの改善
以前の私はサービスの「当たり前」ができていませんでした。
あくまでも「サービス」であり、広告を貼っているのだから、ユーザーに使ってもらうことを第一に考えるべきです。
方法は様々ですが、どうやって使うのかとか今アプリケーションの状態がどうなっているのかをユーザーに知ってもらう必要があります。
サービスを名乗るのであれば絶対になんのガイドもない真っ白ページに誘導するなんてことはしてはいけません。（戒めろん）
エンジニアでないユーザーでもわかりやすいように
自分が端くれとは言え、エンジニアであるためメッセージが難しくなりがちです。画面のメッセージやガイドはなるべくこのアプリケーションを開いた人にどうしてほしいのか、どうすると結果どうなるのかという部分を伝えるようにすべきだと考えています。過程や方法なぞどうでもよいのだァー!
今回であれば、とにかく💩にあなたの顔の輪郭線を書いて表情を映すことができればよかろうなのだァァァァッ!!
なので、「カメラで顔を映して確認しながら顔を真ん中に移してね」というような文言を採用しました。
こんなシンプルなアプリではそりゃそうじゃと思われますが、いくら複雑になっても忘れてはいけない意識なのかなと感じました。
利用されているサービスではないが…
今後も改修を続けていきたいと考えています。
利用していただくことは一つの目標ですが、あくまでも自身がコードを書いて物を作ることをメインの目的として開発していきたいと思っています。
多分、初学者はそれくらいの気負わずに開発を継続することが大切なのかなと思います。
Bootstrapの利用とpositionの難しさ（この項は余談）
Bootstrapを一応採用しました。ほとんど使いこなせていないこともありますし、優秀な記事はたくさんありますので、導入方法などは紹介しません。
多くの記事でありましたが、私もしっかり読んでおらず詰まった部分で、グリッドシステムを使いたいならcontainerちゃんと使え。必須だと書いてあります↓
BootstrapDocument
このことだけは伝えたかった。
自身のページではまだcontainerを使ってrowをいくつか作っているだけですが、レスポンシブと言えるかわかりませんが、スマホで開くとスマホサイズ用にサイズが調整されるようになりました。今後、サイドバーを実装する際に便利そうだなと感じました。
また、ＣＳＳをしっかりと理解する良い機会になりました。（positionの指定についてよく理解していなかったこちらは別記事でまとめてみたいと考えています。)