Trial and Error

深瀬鮎美のあたまの中身...

製作中のあたまの中の取り止めの無いぐるぐるした思考を、時系列に羅列してみました。

Back

レンタルルームWebサイトを作成した時の頭の中です。

まずは、企画書をまとめないと...

なにが目的? 集客! 店長は、第３の居場所にすることが目標と言っていたので、テーマにしようお客さんは、近郊に住む時間のある主婦だろうな近所の人に知ってもらうのが目的になるならウェブサイトだけよりも、まずチラシがある方が効果がありそうだな... ヘッドスパのサイトをとにかくたくさん見てみようデザインは、高級感のある黒地に金色風ロゴや、エスニック調のものやリゾート風のものが多いな... この中で、他との差をつけるとしたら、依頼主のコンセプトに合わせて、リラックス感のあるデザインにしたら他店との違いもだせるかな? コンセプトがしっかり載っていなかったり、情報量が少なく感じるサイトはちょっと怪しくみえる... どんな構成?必要な要素は? [ここで相談] もし現実的に一定の収入が見込まれることを目的とするならばヘッドスパのみでどのくらいの人に需要があって、訪れてもらえるお店になるだろうかまったくの新規客が、開店したばかりの個人宅の一室のヘッドスパへ来店する見込み今回は思い切ってヘッドスパのみ→癒しの場へ方向性を変えるレンタルルームにして、好きに過ごせる、癒しの空間という店舗という方向で進めてみよう時間ごとに部屋代をもらう+オプションで好きに過ごせる=利益があがるこんなのやってみたいな~駅からの道のりを事前に確認できるバーチャル散歩買い物かごみたいなゲームのようなみためのオプション選択予約画面そんな予約フォームは、実用的じゃないかも...その労力で、もっとできることがありそう LINEのミニアプリで予約システムをつくるのに挑戦してみたい!!!

ワイヤーフレーム、Figmaでつくってみよう

Figmaはあまり使ったことがない、何ができるのか知りたいから練習にもなるなスマホからみる人が多そうだから、モバイルファーストで作ってみようかな! サイトマップは事前に作っていたけど、ちょっと違ったかもしれないワイヤーフレームの手がかりにあまりならなかった... 練習も兼ねて、色々な要素を入れてみたいな、なにができるかなナビゲーション部分を、ランダムな配置にしてみたら面白いかな? 診断コンテンツで、オプション追加に誘導したい! スマホを傾けたらなにか起こるファーストビューにしたい! あと、ファーストビューはスクロールをたくさんしたら現れるような、カーテンを開くようなアニメーションにして、このお店の世界に入っていくような演出をしてみようかな？やっぱりファーストビューまでに辿り着くのが遅いと、ストレスを感じたのでやめることにしようとりあえず必要そうな要素を並べられた、デザインに入ってみよう

デザインカンプ

使い慣れているイラレでデザインカンプを作ってみよう! ロゴマークを活かして、手書き文字や線の飾りをつけたいなゆるいカーブをたくさん使ったデザインで、リラックス感を出したいなオプション一覧部分は、あえてちょっと違うテイストにして、文字を丸で囲ってみようファーストビューは、ウェーブの多いデザインにしたいスマホ版がだいたいできたから、PC版をつくろう要素が足りない！スカスカだセクションごとの配置は、縦並びだけになっているけど、PCだとそれじゃおかしいから考えよう! オプション部分、円の中に文字って思っていたけど、やっぱりあとから追加したり書き換えられるようなデザインにしたほうが、使いやすくて見やすいな予約ボタンを一番目立たせたいから、全体のグリーン調に対してピンクにしてみようフォントは硬すぎず、きれいすぎない、丸みのある明朝体にしようなみなみデザインは、レスポンシブのときにどうしようかな、でも気に入っているから残してみよう PC版ができちゃえば、それに合わせてsp版もすぐできた! 結果2回sp版を作ることになってしまったから、次からはpc版からデザインしようかな

コードを書く!!

デザインしたのはいいけれどこれをどうやってコードを書いたら良いだろう、と思う部分があるなトップは、画面に対して四方から画像を固定してカンプの見え方にしよう！と思ったけど崩れて隙間ができたり、セクションからはみ出していたりする... セクション毎にレスポンシブデザインをしながらが進める方が良いのか、まずはPC版で全て作ってからspサイズに取り掛かるのが良いのかな？忘れない内にセクションごとに仕上げていく方が良いみたいまだ途中...なぜかh4に要素が無いのにh5がある! 書きはじめる前に計画しないと、こうなるのか... トップの飾りが写真を邪魔しすぎているから、もう少し調整しよう...! 店内の写真や過ごし方の写真がないので、課題が解決されていないように感じる,,, フォトギャラリーを追加した方が良さそうだ。だいぶ進んだところから、今更戻ってデザインの修正になってしまった。次からは初めからもっと確実なデザインを心がけよう！フォトギャラリーだけよりも、お店のくわしい紹介文を、まとめて魅せてみよう！次はHTMLを書く時点で、Javascriptのことも考えられると良いな

気がついたこと

・依頼主に聞いたことをそのままウェブサイトにするのでは、問題解決にならないこともあるかもしれない。必要なのは何が問題なのかを分析して、その問題自体を解決できるように上手に良い方向に誘導することなようだ。・イラレでデザインをつくると、そのフォーマットでは良い感じに見えても、コードを書いてみると崩れやすかったり、文字のサイズや余白がまちまちだったりしやすい、Figma等は感覚的にコードを書く前段階のようにデザインをつくれそうだ、ということが今回試してみて実感できた。・モバイルファーストでデザインを作り出すと、PC版をつくるときに苦労した。spの方が閲覧数は多いかもしれないけれど、PC版も必要なときには、PC版の方からデザインするとレイアウトなどで後々に悩まないのではないかと思った。・無理な重なりや、はみ出しのあるセクションは、コードを書くのにとても時間がかかった。また、崩れてしまうこともあった。・なぜかh4にあたる部分がなく、h５がある状態。全体的にデザインカンプの時点で、もっと把握して計画する必要がある。