制作メモ
今回、椎葉重車輌様のホームページリニューアルをさせていただきました。
その際、手順や注意点など思う点がありましたので、忘れないようにメモしていきたいと思います。
今回のリニューアルについて
- PHP,JSのバージョンアップに伴い最新バージョンにする。
- 全体デザインの変更のため、HTML、CSS一から作成
- WordPress利用で動的可能なWEBとする。
上記のことを踏まえてリニューアルを行っていきます。
※私個人が行うリニューアルの流れなためもっと効率のよいやり方があると思います！
Ai/XDでリニューアルデザインを作成する。
私がデザインをするときに、気を付けていることはホワイトスペースの活用と文字の見やすさを考えています。
今回のリニューアルは、文言やコンテンツ内容はそのままで、ベースデザインの変更のみを行っていきます。
デザイン作成で注意するポイント
・コンセプトカラーを決める。
・トップページ、サブページの追加するコンテンツをまとめる。
・動的コンテンツ・静的コンテンツを明確にする。
・ホワイトスペースは用途ごとに統一する。
・デバイス表示幅を考える。今回は横幅「1000px」とする。
私がデザインを作成するときは上記の注意点を意識しながら作成します。
リニューアルデザインを基にHTML/CSS作成する。
ホームページのデザインが出来上がったら、HTML/CSSで再現していきます。
HTML/CSS作成でのポイント
・ディレクトリ管理は大切！
・ベースとなる素材や画像は、imgフォルダの中の特定のフォルダでまとめると良い。【/img/aset/…】
・sectionでパーツごとに要素を作成すると組み替えやすい。
・ベースデザインのCSSと追加要素用CSSを分けておくと管理しやすい。
私がHTML作成するときに注意していることは、ディレクトリ管理が一番です。
サーバー移行や修正、差し替えなどでディレクトリ管理が適当だと手間取ってしまいます。随時管理しやすいようにしておくとミスや作業の手間などが軽減できるため特に注意しています。
HTML/CSSもなるべく管理しやすいように要素ごとに内容をまとめたり、パーツ分けして検索しやすいようにするなど配慮が必要と思います。
テストサーバーにWordpress導入
HTML/CSSが出来上がったら、Wordpress用のテーマを作成していきます。
今回は、Wordpressの初期に入っている【twentynineteen】をもとにテーマを作成していきます。
必要となるPHP
・header.php
・footer.php
・archive.php
・single.php
・page.php
・カスタム投稿
・ウィジェット追加
今回は流れのメモなのでテーマ作成のメモは次回別で作成します。
WordPressテーマ作成でのポイント
・プラグインは必要な時だけ使う。
・ローカルで編集したものをFTPアップロードしながら編集をしていく。
・使用する【PHP】の構成はディレクトリ管理と同様に管理しやすいようにする。
WordPressは、WEB上で編集や投稿が行えるメリットがありますが、不具合が起きたり、ネット環境の影響で更新ができなかったりする場合がありますので、上記のポイントを注意しながら作成していきます。
プラグインは、とても便利ですが制作者が更新しない場合やバージョンアップに伴い不具合が出る場合もあるため極力するないに越したことはありません。互換性も考える必要があるため最低限のプラグインのほうが管理しやすいと思います。
【twentynineteen】は、contents.phpで内部が分かれていますので、サブページのコンテンツ部分のデザインが複数ある場合はとても編集しやすくて愛用させていただいています。
WordPressのサーバー移行
WordPressの移行を行っていきます。テーマをZip化しリニューアルしたいサイトに導入してもよいですが、今回は【Search-Replace-DB-master】を使用しサーバー移行をしていきます。
WordPressのサーバー移行でのポイント
・移行先/移行用のバックアップを取る！
・データベースのID/PWをメモする！
・使用するPHPのバージョンを確認する！
データベースとFTPのバックアップは、絶対取る必要があります。移行手順のミスやネットワーク不具合で正しく移行できなかった場合や移行後にシステム不具合があった場合などを考えて、移行先と移行用のバックアップはしっかりとっておきましょう。
また、ID/PWなどの管理情報は念のためメモしておくとよいです。
使用するPHPのバージョンが最新のものなのか確認しないと移行エラーやシステムエラーにつながりますので必ず確認が必要です。
リニューアルの流れ まとめ
普段、なんとなくサイトリニューアルを作成する流れを把握していましたが改めて書き出してみると注意点や次の作業のためにしておかないといけない部分が見えてきてメモ書きしてよかったと思います。
作業方法や手順はそれぞれやり方あると思いますので、私の場合はという感じで書いています。また、デザイン→コーディング→アップロードの流れで書いていますが、クライアントによっては、再度修正でしたり、素材用意からの場合もあると思います。
次回リニューアルする際に活用できたらと思います。
最後まで読んでいただいた方はありがとうございます。
次回は、WordpressのPHP作成についてメモ書きをしていけたらと思います。
