ウミ
クル

ブログ作成の感想

webデザインの勉強を初めたころから、アウトプットの場としてブログを書こうと考えていました。
Udemyで勉強している時もブログの記事になるようなネタを残し、一部は手っ取り早くQiitaに記事を投稿していたので、 ブログ作りにはそんなに時間がかからないだろう、と簡単に考えていたのです。 ところが、いざブログを作ろうとすると、あれこれ悩んで手が動きません。
記事作成、サイト構成、ページレイアウト、コード設計、ブログ名、ロゴ、、、 一つに取り掛かると違うことが気になり、結局どれも進まずに時間が過ぎていく。まさに焦りの境地でした。

そんな時に 「コーディングを助けるためにデザイナーができること」 という記事に遭遇。
想像力を働かせて次の工程に配慮しつつ、一つ一つの仕事を丁寧に進めることが書かれています。 web制作にとどまらず、全ての仕事に対して言えることかもしれないな、と深く納得しました。
一旦落ち着いて、自分の中にデザイナーとコーダーを置き、役割を分担してみる。 実務のように作業を切り分け、それぞれの関係性をみて計画を立ててみる。 すると、あれもこれも気になって全てが中途半端だった状態から、ようやく抜け出すことが出来ました。 その後は、次工程に配慮しながら一つ一つ丁寧に、を意識するとスムーズに進みました。

このように、出だしからつまずきが多かったブログ作成ですが、このページでは特に大変だと感じた点と、ブログを作って本当に良かったと思える点を書き出してみたいと思います。

ブログ作成で大変だった点

記事作成
世に公開される記事を書くのは責任重大ですよね。なので調べます。よって進みません。
ようやく伝えたい内容の理解が深まってきても、今度は自分の文章に納得がいかずに、また止まる。 予想以上に時間がかかりましたが、「100点を目指さず、70点でGoでいい」という話を聞き、良しとしました。

ブログを公開した後に 「ビジネスに役立つ上手な文章の書き方11のコツ」 という記事に出会いました。 よくある文章に潜む、伝わりにくいポイントについて、秀逸な例文とともに詳しく解説している記事です。 伝わりやすくするための修正方法も丁寧に、具体的に書かれています。
今後はこの記事を参考にしながら、文章の練習をしていきたいと思います。

コード設計
クラス名はBEMの命名規則に則り、ファイルはSass the 7-1 patternに沿って振り分けをしたつもりではありますが、これがまた難しかったです。 ブログ更新のために数ヶ月たって見返すと、コード設計が上手くいったところ、まずかったところがよく分かります。
コード設計をものにするには時間がかかりそうなので、今後練習を重ねて少しずつ理解を深めたいです。

レスポンシブ対応
デスクトップ版で完成したコードをモバイル版にレスポンシブ対応していく中で、そもそもここはgridではなくflexだったのではという箇所がいくつか。。 モバイル用に修正したつもりがデスクトップ版にも影響が。。ということで画面を伸ばして縮めて、伸ばして縮めて。。頭がこんがらがりました。
また、どうしてもgridを使いたいところには機能クエリの@supportsでflexで代用としたのですが、gridの代用がflexでいいのか、どうせならFloatにした方がいいのでは。。 などなど、やはり独学では限界があると感じた箇所がいくつかあります。

ブラウザ対応
実際にIEでこのブログを見るケースはないと思いますが、それでも勉強の一環として主要ブラウザの対応をしました(Chrome/ Safari/ Firefox/ Edge/ IE/ iOS/ Android)。
ブラウザチェックをしてみて、まず驚いたことはローカルサーバー(MacOS VScode:Live Server)のChrome検証ツールでの確認があてにならない場合があることです。
ローカルサーバーでは問題なく見えていた背景画像が、iPhone実機(iOS Chrome)では正しく表示されませんでした。 (これはbackground-attachment: fixed; background-size: cover;を同時に設定するとiOSでは機能しないためで、 position: fixed;とした擬似要素::beforeに背景画像を置くことで解消しました。)

また、CSSだけでなくJavaScriptでもブラウザの互換性に注意が必要であることに気づきました。サイト開設当初はjQueryを導入していましたが、JavaScriptに書き換えてみると、 ES6で導入されたアロー関数やfor...ofなどのメソッドがIEではエラーになりました。jQueryはある程度ブラウザ対応がされているために問題なく動いていたことを知りました。

OSが変わればレンダリングエンジンも変わるので、表示のされ方に違いがでる可能性はあるし、また、更新が終了しているIEではES6以降のメソッドが使えないことも、今では理解できるようになりましたが、 実際に体験してみないと気がつかないことが沢山ありました。

問い合わせフォームの設置
HTML、CSSを勉強すると、どの講座でも紹介される問い合わせフォームですが、PHPの機能部分については当然ながらフロント側の講座では言及されません。
それでもPHPのコードさえあれば自分にも設置できるだろうと考えていました。 問い合わせフォームに使えるPHPコードを提供しているサイトを教えてもらい、一通り作り込んでテスト直前の状態まで仕上げたのですが、 実はセキュリティーと保守の観点からみると危険な行為であることを知りました。
自分では修正できないコードを使用すると、何かあった時に直すことができないばかりか、サーバー側の影響範囲すら把握できないため、 バックエンドはバックエンドのプロにお任せすべきで、そのために提供されているツールを使った方がいいそうです。
結局、問い合わせフォームのwebサービス formrun を利用することにしました。
本当にやりたいこと、できること、手を出すべきではないことの範囲を理解して明確に線引きすることは大切だなと感じます。

覚えることが多い !
覚えたらもっと良いサイトができるのにと感じたり、知れば知るほどweb沼が深くて焦ってしまうという意味で大変な点です。
JavaScriptは全体像が掴めないほど大きく感じられるし、CSSもどんどん新しいプロパティが出てきます。 勉強を進めるとその世界が見えてきて、深すぎて怖いというのが今の気持ちですが、少しずつ前に進んでいくしかないですね。

ブログを作って良かったと思う点

サイト制作の一通りの作業を体験できる
情報設計、コンテンツ作成、デザイン、コーディング、サーバーアップ、更新作業、と一通りの作業を実際に体験することで、サイト制作への理解が深まりました。 問題が発生した時の調査方法、ググり方も上達したと思います。

実験の場として利用できる
新しく覚えたCSSのプロパティや、JavaScriptの動きの確認を実験的に試す場としても利用できるので、自分のブログを作って良かったなと思います。