「企業内ウェブ担当者のためのホームページ制作・運用講座」

ホームページ（ウェブサイト）は、既製品とは異なり制作会社に発注したら自動的に出てくるようなものではありません。

制作の契約後に、会社や製品のアピールポイントは何かなど、お客様が資料を提供しない限り、まともなものは出来上がりません。

より適切なホームページ制作のため、また、よりよい制作会社を見つけるためにも、発注者側にもある程度の知識と心構えが必要です。

そこで今回、「発注者側」が身に着けておくべきホームページ制作の知識をまとめた動画講座を作成しました。

これを受講したら、会社の事業戦略に沿ったウェブサイトをコスパ良く発注できるようになるでしょう。

現在は制作の基礎知識や主なコスト、ウェブ戦略、関連法規と個人情報保護のためのセキュリティが主な内容となっていますが、随時運用に関する内容も追加していく予定です。

今後内容を増補していくに伴い販売価格も上げていく予定です。購入は以下のリンクからお願いいたします。

フォームで入力→PDF化してメールで送信するWordPressプラグイン

Send PDF for Contact Form 7

Contact Form 7 のフォームを使ってPDFファイルを作成し、メールに添付して送信できるプラグイン。

作者はフランス語圏の方ですが、Google翻訳でも内容は把握でき、内容も分かりやすいので導入は比較的容易です。（説明書へのリンク）

なお、フォームからはPDFだけではなく、CSVファイルも作成可能。

PDFは、プラグインの設定画面でHTML, CSSで構築します。構築する際のエディタにはコード補完機能があり快適に編集できます。

PDFファイルの作成にはmPDFを使用しているとのこと。mPDFの説明書も参考になるかもしれません。（mPDFへのリンク）

多良川殿サイトリニューアル

酒造メーカー多良川様のウェブサイトリニューアルに際し、WordPressテーマを作成いたしました。

テーマの特徴

1. トップページファーストビューにおいてスライドショーとズームアニメーションを組み合わせ
2. ページ遷移時のシャッター風アニメーションの導入
3. 「多良川通信」の一覧ページにおいて、サムネイル付きとリスト表示の組合せ
4. 記事ページにおいて、リニューアル前のコンテンツを活用する形でのリデザイン
5. 縦書きの見出し、横書きの本文の組合せを実現
6. ショートコードを活用し、表現力のある記事構成を実現

サイトリニューアルではWordPressを新規に入れて切り替えることもありますが、今回はリニューアル前もWordPressで運用されており、「従来の記事を残した形で」との条件があったため、テーマの入れ替えで実施しました。

当初有償テーマの導入も検討されていましたが、そのようなテーマはカスタム投稿タイプなどを使っていることが多く、従来のコンテンツを維持する上では不都合が生じることも多いため、専用テーマでの構築をお奨めしました。これにより、SEO上不利になることもなく、作業工数も削減することができました。

また、記事の途中で横幅いっぱいに広がる画像の導入や、特定カテゴリーへの記事一覧の出力などの要件もあったため、クライアントが簡単・自由に設置できるよう、ショートコードを設定しました。

リニューアル前後で主要ページのデザインが大きく変わるため、それらのページは新規に作成し、テーマ切り替え時にリダイレクトさせるようにしました。
また、リニューアル前はパーマリンク設定がデフォルトのままであったため、今後のリニューアルも見据えてスラッグを使ったパーマリンク構造に変更しました。これにより.htaccessファイルでのリダイレクト処理とWordPressのリダイレクト機能が衝突する問題が発生しましたが、プラグインの導入により解決しました。

SEO用WordPressプラグインの開発

開発の背景

これまでWordPressサイト制作時には、SEO対策としてAll in one seo packを使っていましたが、先日のアップデートで破壊的な変更が行われたらしく、一部のサイトで不具合が発生したため使い続けるのは得策ではない、と判断しました。

不具合の内容としては、記事タイトルとして the_title() ではなく、get_post_custom()['_aioseop_title'][0]を使っている箇所があったのですが、これで出力されるタイトルが更新できない、というものです。

おそらく、All in one seo pack のテーブルがアップデート前後で異なるものとなり、get_post_custom()[‘_aioseop_title’][0]では、古いテーブルのデータが取り出されるようになったのでしょう。出力コードが異なるものになっているのではないかと思います。（まだデータベースを確認していないので断言はできませんが。）

いずれにせよ、このコードで出力される値を変更することが不可能になった（データベースを直接編集すれば可能でしょうが現実的ではありません）、というのが現状です。

出力コードの変更はこれで2回目となります。他にも、All in one seo packはアップデート時に不具合が発生する頻度が高いため、これを使い続けるのはある種の負債となるでしょう。不具合が発生したら、それの対応に時間を取られ、業務効率・生産性が下がります。

開発したプラグイン

固定ページおよびトップページのSEO用のタイトル、ディスクリプションを登録し、metaタグなどに出力するだけのシンプルなものです。

出力するタグは、

• link rel=”canonical”
• title
• meta name=”description”
• 以下のmeta property
  • og:site_name
  • og:type
  • og:title
  • og:description
  • og:image
  • og:locale
  • twitter:card
  • twitter:domain
  • twitter:title
  • twitter:description

で、トップページ、固定ページではカスタムフィールドなどで登録したものを、カテゴリー一覧、投稿ページでは標準のタイトルと概要を出力するようにしています。

XMLサイトマップの出力はできないので、そこだけは別のプラグインを使うことになりますが、これで乱暴なアップデートを繰り返すプラグインに振り回される心配は無くなりました。

将来は公式ディレクトリに登録できるようにしたいと考えています。

GVC殿向けWordPressテーマ作成

GVC（ゴールドバリュークリエーション）殿は、自動車整備工場を主要顧客とするシステム制作会社です。設立2年目くらいのころからお付き合いがあります。

テーマについて

第1世代

• レスポンシブ標準対応
• グローバルナビゲーションを1ソースでPC用（ヘッダーに横並び）、スマートフォン用（ハンバーガーボタン）に対応。
• IE8対応

Bootstrap2を参考に作成したCSSフレームワークを使い、標準でレスポンシブ対応を実現。サイト制作を効率化しました。

それまでは有料のテーマをカスタマイズして作成されていましたが、独自テーマにより、より自由度の高い設計が可能になりました。

また、それまで使われていた有料テーマがPHPのバージョンアップなどについて行けず、エラーが発生した際には、デザインをそのままにこの独自テーマで作り直しを行い、現在GVC殿が管理しているサイトのほぼすべてが独自テーマとなっています。

第2世代

• それまで作成したサイトの実績をもとに、より効率的なサイト作成が行えるようにarchive.php, page.php のテンプレートを改良。
• 独自のショートコードなどを拡充。
• 固定ページとランディングページを1ソース・1アドレスで管理できるように改良。ウェブ広告からの訪問に対してはLPとしてふるまうギミックを追加。
• トップページに、カテゴリー記事の最新記事数件を抽出し、表示する機能を標準搭載。

第3世代

• ブラウザ環境の変化を受け、IE10以前のサポートを廃止。
• 第2世代の運用評価をもとに、機能を整理。
• キービジュアルのレスポンシブイメージ（画像の出し分け）に標準対応。
• 固定ページのキービジュアルをトップページのスライドショーに自動適用する機能追加。

リキッドソリッドエアー　強炭酸水販売サイト

注文をメールで受け付け、支払いは代金引換のみと言う簡易的な通販サイトです。

コーディング下請けで、当初は「画像をペタペタ張るだけでよいから」と3日で作れの無茶振りでした。

実際にはメールのプラグインの挙動に問題があり、その問題解決も含めて1週間でのコーディングとなりました。

技術的には、注文画面で入力された商品数を集計し、注文商品のリストと合計金額の出力、そのデータをメールフォームプラグインに渡す簡易カートシステムをjavascript/jQueryで構築するのがポイントとなっています。

将来の商品数増加にも比較的容易に対応できるようにしています。

DTPデザイナーからWebデザイナーへの転換講座

Udemyで、「DTPデザイナーからWebデザイナーへの転換講座」という講座を公開しました。

16動画、2時間弱の短い動画です。

印刷分野からウェブ分野へ職種転換を行いたいグラフィックデザイナーが直面する課題を解決するものになると思います。

現在印刷分野で活躍しているグラフィックデザイナーだけではなく、独学や専門学校などでグラフィックデザインを習ったばかりの人にも役に立つ内容となっています。

内容は、

• HTMLとCSSの役割の概要
• 画像のフォーマット
• ヘッダーの設計
• キービジュアルとスライドショー
• メインコンテンツ
• サイドバーとフッターの設計
• ウェブアクセシビリティの概要
• アクセシビリティのガイドライン
• カラーユニバーサルデザイン
• レスポンシブデザイン
• SEO
• その他の注意事項

となっています。

Udemyの定価では3,600円ですが、以下のリンクから3,000円で受講できます。

https://www.udemy.com/course/dtp-to-web/?couponCode=D2WKT3KHP

ASKHOTELS

これまでのコーディングの中で、最もCSSのコーディングに悩んだ思い出深いサイトです。

平行四辺形の タイルが 3行、3列に並んだ構造が特徴ですが、シンプルに見えて実は難しいというデザイン。斜めに走るラインを作ることの困難さは、ウェブコーディング経験者なら理解していただけるのではないでしょうか。納期に余裕がない場合は「無理」と言わざるを得ないデザインの一つです。

完全レスポンシブ対応で、画面幅が狭くなると縦の列が3列、2列、1列と順次減っていくようになっています。

同時に、平行四辺形のタイルのどこをクリックしてもちゃんとリンクが機能するようにするのがむつかしいポイントで、この課題を解決するために3日ほどHTMLとCSSの構造を考え続けました。

結局半分は力業で解決しています。現在ではCSS3のgridプロパティを活用することでもっとシンプルかつスマートに実現できるでしょう

ライラック自工

タイルレイアウトの欠点の一つは、トップページの文字情報が減り、SEOの面で不利になることです。本サイトでは、タイルにマウスオーバーで概要説明を表示させる機能を盛り込むことでこの問題を克服しました。

また、レスポンシブデザインに完全対応しています。

本サイトの特徴の一つはトップページのアニメーションです。

アニメーションを行うJavaScriptコードは、CSSのpositionプロパティの値をリアルタイムで変更して行う例が多くみられますが、再レンダリングの負荷が高く、ブラウザによってはアニメーションがスムーズに動かないことがあります。

このサイトではCSS3のアニメーション機能を用い、JavaScriptの関与をクラス名のOn,Offにとどめることでブラウザの負荷を大きく減らし、スムーズなアニメーションを実現しています。

また、曲線を多用することでサイト全体に柔らかさを持たせています。PCサイト表示ではグローバルメニューが下に反った緩やかな曲線を描いていますが、これはCSSで実装しています。トップページのキービジュアルの下辺の曲線もCSSで実装しています。

西自動車商会

テーマは独自に制作。

スマートフォン表示でのタップが行いやすいタイルレイアウトを採用。マウスオーバーでのオーバーレイや動画につけたテレビの枠などをCSSで実装するなど、コーダーとしてのマニアックな作りこみを行っています。

与えられた仕様のため、タブレットサイズ以上は固定幅という限定的なレスポンシブデザインですが、スマートフォンでもボタンをタップすることでPC表示とレスポンシブ表示を切り替えることができるようにしています。

回遊性を高くするための仕組みをいくつか組み込んでいることと、運用におけるSEO対策が上手くいったため、新車販売や車検整備関連のキーワードで常に上位に来る強いサイトとなっています。

オハコルテベーカリー

WordPressの有料テーマ「Rosa」の機能面でのカスタマイズを担当いたしました

料理メニューの表示パターンやカテゴリーを独自のものにする点で苦労しました。（現在は料理メニューなどの掲載はやめているようです）

他にも、デフォルトの404ページの作りがかなり良くない（閲覧者をイラつかせる）ものであったため、その機能を無効化するのにかなり苦労しました。

パララックス効果は、固定ページの親子機能を利用して、子ページをパララックスのブロックとするというユニークな手法で実現していました。

WordPressの固定ページをパララックスのブロックとする手法は、クライアントが自分でブロックを追加、並び替えできるという点で良いアイデアだと思います。

そこで、同様の機能を独自に開発し、自作のテーマでも実装しました。PHPとJavaScript(jQuery)が密に絡んでいるのであまりCoolなコードとは言えませんが、背景画像を固定にするか、パララックスにするかなどの選択ができるようにしています。

パララックス自体はもう流行が過ぎた感があり、ユーザビリティ上の批判もありますが、ファッション系など、画像の重要性が高く、雰囲気を重視するサイトでは今後も重要な表現手法として残るのではないかと思います。

OOCSSを土台にしたCSS命名規則

概要

BEM, OOCSS, SMACSSなどのCSSの設計概念はメンテナブルなCSSの設計に重要な概念である。

しかし、いずれも設計思想であって具体的な命名規則ではない。そのため導入してもうまく使いこなせるとは限らない。BEMを導入する際のありがちな失敗として、HTMLの構造をトレースする形でCSSを設計したり、クラス名が長くなりすぎるといったものがある。身に着けるにはある程度の試行錯誤が必要となる。

本規則はその試行錯誤の時間を短くすることを目的とし、不自由なルールとしている。

また解釈があいまいになりがちな英単語ではなく、概念が明確な日本語でキーワードを定義することにした。英単語の方が格好いいが、現場は泥臭いのである。

BEMにおけるBlock、SMACSSにおけるLayoutおよびModuleは「役割」として再定義している。ModifierやStateは装飾を担当する「従属セレクタ」として切り離している。

ルール

1. 単語間はハイフン1つで結合。キャメルケース、アンダースコアは使わない。
2. 単語はすべて小文字の英単語を使う。ローマ字表記の日本語は避ける。
3. IDセレクタ、インラインスタイル、!importantは原則として使用禁止。
4. クラス名を構成する単語は3語まで。
5. レイアウトセレクタ、機能セレクタ、従属セレクタ の3種類のクラスに分類される。それぞれ以下の構成となる。
   1. レイアウトセレクタの命名は “役割-場所-詳細”あるいは”役割-詳細”
   2. 機能セレクタの命名は “役割-機能-詳細部品”
   3. 従属セレクタの命名はレイアウトセレクタと同じだが、役割の箇所には dep(depend) か js(JavaScript) が使われる。

レイアウトセレクタはグリッドシステムが該当する。画面上の配置を決定する

機能セレクタは、ナビゲーション、フォーム、ボタンなどの機能に関わるもの。

従属スタイルは、他のモジュールとセットのときのみ有効になるCSSセレクタである。BEMのModifierをBase, Elementから分離したと解釈してよい。

詳細

単語間の結合

BEMではアンダースコア2つ、ハイフン2つが主流でしかもいくらでも結合できるためセレクタ名が長くなりすぎるリスクがある。長すぎる名前はコードの視認性を悪化させる、タイプミスを誘発するなどの問題をはらむ。このような事態は避けるべきである。

アンダースコア、キャメルケースの使用を不可とし、さらに区切り文字をハイフン一つに限定することで、名づけの自由度は大幅に下がる。一見不自由だが、膨大な選択肢を絞り込むことができる。

レイアウトセレクタ

レイアウトやグリッドシステムに関わるのがレイアウトセレクタになる。Bootstrapと互換性があるためそのまま流用してもよいのではないかと思う。

役割：header-, sidebar-, footer-, row, col-, container, jumbotron, card-　など

場所：-home-, -archive-, -post-, -sm-, -lg-, -print- など

詳細：-fix, -hidden, -month, -category, -12, 1by5, -eq など

機能セレクタ

ボタン、メニュー、フォームなどの機能に関わるものは機能セレクタに分類する。

役割：btn-, form-, gnav-, menu-, heading-, lead- など

機能：-hamburger-, -submit-, -cancel-, -item-, -title- など

詳細：-text, -tap, -inner など

従属セレクタ

例えば .dep-red　という従属セレクタは

.dep-red {...}

と書いてはダメで、

.othermodule.dep-red {...}

といった形で、同じ要素にいる他のセレクタに従属していなければならない。

また、子孫セレクタとしての利用は禁止である。入れ子構造のHTMLだと確実に衝突するからである。

NG:　<div class="module"><div class="dep-red"></div></div>

OK:　<div class="module dep-red"></div>

従属セレクタであることはdep（depend）やjs（JavaScript）の接頭辞によって判別する。

独 立していないセレクタの存在はあまり気持ちのよいものではないが、こうすることでCSS,HTMLの両方で変更が行いやすく、また拡張もしやすくなる。 JavaScirptを用いたDOM操作とも親和性が高い。またこれにより構造と装飾は完全に分離され、CSSファイルのサイズが小さくなる。従属セレク タのクラス名は他の機能セレクタなどの従属セレクタにも使いまわしができる。

 そのほかのルール

現在ではほぼ常識といえるような内容となるが、以下のルールを原則とする。

Base

リセットスタイルを適用するセレクタの一群。基本的に上記の命名ルールの適用外で、HTMLの要素の他、微調整用のクラス（margin-topの調整など）に使うセレクタが該当する。

基本的に単語一つで間に合うと思うが、複数の単語を使う場合は、役割-場所・機能-詳細 の原則に従う。

例

.mt10 {margin-top: 10px;}

.small {font-size: 80%;}

基本的にnormalize.cssなどを活用する方がよいと思う。

セレクタの制限

IDセレクタは優先順位の混乱を招くためCSSでの使用は原則禁止。JavaScriptのセレクタとしての利用は可。この場合接頭辞js-は不要（CSSでは使わない原則だから）。

インラインスタイルもメンテナンス性が悪化するので原則として使用を控える。ただし、「その場所でしか使わない本当に特別なスタイル」である場合は使用してもよいが、デバッグ目的で適用するのは絶対禁止とする。

!important も原則として使用を控える。ただし、ウェブサイト提供サービス（カラーミーショップやJimdoなど）によって勝手にインラインスタイルが適用されていて通常の方法での上書きが不可能な場合はその限りではない。