Web プログラミング

【もりけん塾40日目】内容確認と修正

LP制作を始めて作成している、ねこらのん(@nekoranon256)です。

 

今、調べながらしているものは以下のとおりです。

  • 画像の中央にテキストを表示する
  • 料金表を作成
  • 画像クリック→スライドさせる

 

ここ数日していたのは、依頼主からの修正や新たな変更でした!

 

  • 画像の変更
  • テキストの変更

 

また画像の中央にテキストを表示する件について、各画像の空白部分にテキストを表示してほしいという依頼だったのでCanvaで画像にテキストを加える形になりました!

 

それぞれ対応していった方法を整理していきます。

 

LP制作の変更と修正

LP制作でまだできていない部分もありますが、内容やレイアウトができたので一度確認していただきました。

 

途中で確認していただく理由は以下のとおりです。

  • 依頼主の立場でどこまで進んでいるか不安であることから
  • 依頼主からの素材を催促するため
  • イメージがつきやすいため
  • 完成図と相違がないかの確認

確認していただくために、画像と動画の両方でしてもらいました。

 

確認方法で使ったツールをご紹介し、変更点についてまとめていきます。

前提:Awesome Screenshotで進捗状況を確認してもらう

2カラムレイアウトにし、サイドバーを固定にしているので動画で見ていただいたほうが良いと考えました。

 

使ったツールは、

というGoogle Chromeの拡張機能です。

 

動画とフルスクリーン画像のスクリーンショットができるものなので非常に便利です。

 

Awesome Screenshotを使った動画はこちらをクリックすると見れます。

変更点①画像の変更

imgタグにテキストを中央配置でしていましたが、画像の部分とテキストがかぶらないようにそれぞれ画像によってテキスト配置を変えるとのことだったので変更に。

 

Canvaというツールを使ってそれぞれの画像にテキストを配置。

 

他にも画像をopacityで透け感を出す方法も提案しましたが、上記の方法を選択されたので採用。

変更点②テキストの変更

テキストが見にくかったので、見やすいように変更した結果を確認していただきました。

 

誤字脱字と要望がその時点で発覚したので修正へ。

 

この修正を回数を決めるとより良かったと感じました!

残っていること

レスポンシブデザインと画像クリックしてテキスト表示がまだ残っていますが、また次の記事で方法をまとめていきます。

 

おわりに【反省点】

1回実際にすると、流れが分かってきます。

 

しかしもりけん先生がおっしゃるようにスピーディにプロはこなすということの意味も分かってきました。

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada