誰が後任になっても大丈夫な作り方を

  • 2022.7.17.日
  • 2022.7.17.日

ここ最近はサイト制作をすることが多いので、サイト制作に関する取り組みをご紹介したいと思います。Wordpressを利用したサイト制作でも、micro CMSを活用したサイト制作でも同じなのですが納品後に永遠に初回制作者の手を離れないわけではありません。

いつどういう技能を持った人がメンテナンスをするかは誰にもわかりません。なので制作時点で可能な限りシンプルにわかりやすく、誰が引き継いでも迷わないように制作することはクライアントにとってきっと有益なはずです。

HTMLしかわからない人でも何となく分かる構造にする

少なくともHTMLやCSSすらさっぱりわからない人が後任になることは確率的に少ないと思うので、ごく基本的な知識や技能だけでも調べれば取りあえずなんとかなるような構造にして制作をすることが第一です。

例えばWordpressならPHPがかなり出来ないと手も足も出ないかというとそうではありません。
基本的に必要なテーマファイルはディレクトリを分けたりすることなく同一階層に配置することは後々メンテナンスの安易さに繋がると思います。ちょっとの条件分岐でテーマファイルを細かく細分化すると、制作者以外ではまず何がどうなっているか把握するための時間が無駄です。

ディレクトリ構造も
img
css
fonts
js
くらいでいいような気がします。

PHPもHTMLをベースに利用する

WordPressはHTMLとの親和性が高いので、PHPでHTMLを呼び出すよりもHTMLの中で呼び出す方がずっと直感的です。例えばimgを呼び出す場合はHTMLしか分からなくても以下のようにしていれば何となくわかるはず・・・。

<img src=”<?php echo esc_url( get_template_directory_uri() ); ?>/img/sc-01.jpg” alt=”画像1″ />

極力プレーンなHTML構造にWordpressのPHPを包括するような書き方を進めておけば、後任者がWordpressに不慣れでも「調べれば」なんとかなるようにしておくことは可能です。

また、<?php endif; ?>が何の終わりかもコメントを残すことで、テーマファイル自体が総崩れになることも回避できるので癖付けしておくといいような気がします。

<?php endif; ?><!–/is_category(“live-event”) –>

CSSはヘッダーで分ける

WordPressだけでなく、CSSはヘッダーの中で分岐させるほうがメンテナンス性が高くなり、なおかつ制作時も利便性が高いように思います。

<link rel=”stylesheet” href=”<?php echo esc_url( get_template_directory_uri() ); ?>/style.css” type=”text/css” media=”all”>
<link rel=”stylesheet” href=”<?php echo esc_url( get_template_directory_uri() ); ?>/css/spstyle.css” media=”screen and (max-width:768px)”>
<link rel=”stylesheet” href=”<?php echo esc_url( get_template_directory_uri() ); ?>/css/pcstyle.css” media=”screen and (min-width:1340px)”>

上記は一例ですが、極端に大きなスクリーンを想定する場合や際どいレスポンシブをやらなければならなくなった場合に効果的です。

個別ページにページIDをスラッグで出力させる

これも後任用ですが、カスタムフィールドなどを使っている場合や個別ページごとに異なるCSSを書く場合があるかもしれませんのでページテーマを作る場合にIDをスラッグで出力させておくと親切だと思います。

<?php
$cats = get_the_category();
$cat = $cats[0];
if( $cat->parent ){
$parent = get_category( $cat->parent );
$parent->slug;
}
?>
<section id=”single-page” class=”post <?php echo $parent->slug; ?>”>

タグに関しては使うかどうかわからないサイトもあるので属するカテゴリータグなどはclassに入れておいてあげるのも親切だと思います。

<?php
$categories = get_the_category();
if ( $categories ) {
foreach ( $categories as $category ) {
echo ‘<span class=”tag”><a href=”‘.esc_url(get_category_link($category->term_id)).'” class=”‘.$category->slug.'”>’.$category->name.'</a></span>’;
}
}
?>

おわりに

わりとどこかの誰かが作ったサイトを修正する機会が多かったので、「何で皆もっとシンプルに他人が見てわかるようにしておかないんだろう?」と思うことが多く、私は今のようなスタイルになりました。

制作の過程が見えるような構造で、わかりやすく、技工に頼らず、泥臭く同じ処理を書いておく。こうすることで多分どこの誰がその後を引き継いでも問題が無くなるんじゃないかとおもいます。

Maslowでは完全に新規でサイトを作り始めることが多いため、クライアントがMaslowの手を離れた後も新しいパートナーと手を取って進歩を続けたときに、サイトに手が加えやすい作り方を推進しています。

デザイナーと実装者の認識の齟齬が生まれない仕組みづくりを考えていく上でも、サイト制作をシンプルにわかりやすくすることは重要だと考えています。

この記事を書いた人

アバター

FUCHIKAMI YOSHIHIRO

川崎医療福祉大卒、専攻は視覚障害。大学卒業後、日産サティオ岡山に営業マンとして就職。翌年新人No1販売表彰を、当時CEOカルロスゴーンから直接表彰される。日産サティオ岡山を退職後、NTTのフレッツ光販売員として中国地域No1、OCN販売でNo2の記録となり表彰。 2006年に自ら「合同会社ジリキ」設立。SEO専業として開業。その後コンサルティング業務・システム開発やサイト制作などを開始し、各種会社立ち上げなどに携わる。 直近では楽天家電部門MVP、年商1億円程度のスマホケース販売会社設立-などの実績がある。また現在、現役グロースハッカーとしてグロースハッカーアワードで各種受賞経験あり。

LOOKING FOR
DESIGNER?

まだ要件が固まってない段階でもご安心ください。
Maslowの営業プロデューサーが、コーチング技術を活用したヒアリングで、企画から一緒に考えさせていただきます。

無料相談を申し込む

DOWNLOAD
COMPANY GUIDE?

まずは情報収集からしたい方はこちら。
Maslowの特長や他社との違い、料金体系、制作までの流れ、制作実績
などがご覧いただけます。

会社資料ダウンロード

LET’S JOIN OUR
DESIGN TEAM!

優秀なクリエイターからたくさん応募いただいてます。迷っている方はぜひ早めにエントリーください!

採用情報をみる