11月15日に開催された、岐阜 WordPress Meetup #76に参加してきました。
https://www.meetup.com/ja-JP/gifu-wordpress-meetup/events/304076652

WordPressのテーマ開発者である、石川さん（『lightning』『X-T9』など）とキタジマタカシさん（『Snow Monkey』、『unitone』など）のお二人が登壇されるとのことで、ぜひお話を聞きたいと思い参加しました。

登壇① 『プロっぽいページには理由がある ブロックパターン時代のページデザインのコツ』

1つ目の登壇は、株式会社ベクトルの石川さんによる『プロっぽいページには理由がある ブロックパターン時代のページデザインのコツ』。
ブロックエディタでサイトを作るときにどうやったらプロっぽいサイトにできるかという視点で、ブロックの取り扱い方のポイントについてお話しいただきました。

石川さんのあげられたポイントとしては以下の2つでした。

• 情報のグルーピングを徹底する
• 情報の重要度を徹底する

これらのポイントを実現するために注意する点として、余白を挙げられていました。
ブロックエディタは自由に余白の設定やスペーサーブロックが入れられるため、余白が自由すぎるということがあります。
そのため設計者以外にルールが伝わってないとトンマナが崩れるという問題が発生します。

そこで余白のガイドラインを用意しておくことで担当者による違いをなくし、サイト内の統一感のあるデザインをしていこうということでした。

ベクトルさんの余白のガイドラインはこちら
https://patterns.vektor-inc.co.jp/margin-guide/

個人的な考えとしても、Webサイト制作では情報の区切りやまとまりを意識することが大事だと思っていて、この話はかなり腑に落ちました。

ガイドラインを作るのは時間がかかるところだとは思うのですが、あらかじめ余白など数値のルールを決めておくことで、更新時のデザインのブレがなくなることや、制作時に迷わなくなるというメリットもあると思うので、意識して取り入れたいところです。

登壇② 『ブロックテーマでサイトをつくってみよう（unitone 編）』

2つ目の登壇は、キタジマさんによる『ブロックテーマでサイトをつくってみよう（unitone 編）』。
実際にunitoneをインストールしたWordPress環境を使って、ページを作りつつ、unitoneのオリジナルブロックの解説をお伺いしました。

詳しくはunitoneのサイトを参照いただくのが良いと思いますが、unitoneは『Every Layout』という書籍で紹介されているレイアウトの考え方を取り入れているそうで、それがWordPressのブロックの相性がいいのではないかという考えのもと設計されているとのことでした。

実際触ってみたところでも、さまざまなレイアウトを実現するためのブロックが用意されていて、驚いたり、感心したり、一言ではまとめられないほどすごいテーマだと感じました。

unitoneのブロックの考え方は、『Every Layout』に書かれている考え方をもとに設計されているそうで、自分がWordPressテーマを編集するときや、WordPressを使わない制作の場面でも取り入れるとよさそうな考え方がたくさんあるなと思いました。

感想

テーマ制作者のお二人のお話は、どちらも余白やレイアウトというcssの設計の部分に関するところだったのですが、自分自身もcssを書くので、思い当たるところもたくさんあり、WordPressやテーマと関係がないところのWeb制作という意味でもとても参考になったと感じています。

実際、自分自身はあまり既存テーマを利用してサイト制作をするということはしていないため、テーマそのものにお世話になることは少ないのですが、それぞれのブロックにどういうcssが当たっているかなどをみることはよくあるので、今回、どういった考え方で設計されているかということを聞けたのはとても良かったです。

テーマとして良いものであることはもちろんですが、Web制作者としてはどのようにテーマが作られているのかを見るのも勉強になると思いました。

下のような画像とテキストの2カラムのコンテンツで、画像が画面端まで、テキストは固定幅（もしくはコンテンツインナーの幅）になっているようなレイアウトをブロック再現してみようと思います。

実装方法

以上の操作をすることで、以下のようなレイアウトが完成です。（上記の手順はどの順番で操作しても問題ありません）

⑤〜⑥でカラムブロックの間隔を0にして、テキストのグループにパディングを設定しているのは、モバイルで縦積みになったときに画面端にテキストがくっついてしまうのを防止するためです。

まとめ

以前、案件で対応したときにがっつりCSSを書いて対応したのですが、今ならブロックだけでできるのでは？と思いついてやってみました。
コーポレートサイトなどでよく見かけるレイアウトなので使い道はありそうかなと思います。

余白や間隔の値や付け方はテーマによって異なるので、同じようにできないテーマもあることは注意が必要です。
（この記事での手順の画面はTwenty Twenty-Fourのものを使用しています）

サイトデザインをリニューアルしました。

前のデザインはもう5年くらい前に作ったもので、随分とそのままにしていたんですが、WordPressのブロックエディタもかなりバージョンアップして機能が増えてきたので、それに合わせる形で組み直そうと思ったのが始まりです。

その上で、せっかくなので見た目の部分でも少し手を加えようと考えました。

機能的な変更

サイト全体をWordPressのブロックエディタの機能をメインにして構築するようにしました。
基本的にはブロックでパーツを構成し、スタイルを選択し、それでも足りないところをCSSで追記するという形をとっています。

理由としては、このサイトをブロックの機能を試す場としても使いたいと考えているということと、このサイトはブログを主として運用していくことを想定しているため、ブロックエディタを使う方が捗るだろうと考えたからです。

今後ブログで色々なブロックの組み合わせを紹介できればと思っています。

見た目の変更

#61a6c6　→　#00AFCC

前はくすんだ青色のような色を使っていたのですが、もう少し明るさが欲しかったので、今回はターコイズブルーを採用しました。
ターコイズブルーは緑みのある青色で、青の落ち着いた雰囲気と、緑の爽やかさ、活発さが合わさったイメージで、自分の目指す、落ち着きがあり、人当たりの良い人物像にぴったりだと思いました。

ロゴデザインも少し変更しました。
ロゴはPoppinsというフォントをベースに角を丸くして、柔らかい雰囲気が出るよう調整しました。人当たりよく、柔らかく人接したいという思いを込めています。
また、iの点の部分を虫眼鏡に置き換えていますが、これは、興味を持ったことはとことん知りたいという自分の性格と、周りをよく観察して必要な行動を考えるという仕事への姿勢を表しています。

まとめ

ブロック中心での構築は、仕事ではやっていたのでそこまで抵抗はなかったですが、一つ一つのブロックの使用を理解して作成する必要があるので、そこはやはり苦労した点です。
慣れてくると、ブロックでいろいろ表現できることが楽しくなってくるので、クライアントワークで納品するときにもそういった面白さみたいなものも一緒に伝えられたらいいなと思いました。

せっかくサイトリニューアルしたので、今後はしっかりブログもやっていこうと思っています。

今までクオリティやら内容やらで「これで出して良いのか」と悩みつつ、ほったらかしにしてた下書きたちをとりあえず生焼けの状態でも出していこうかなと。

とりあえずCSSやWordPressのブロックエディタの下書きが溜まってるので、放出していきたいと思います。

CSSで、写真の角を差し込んだフォトフレームのような見た目を再現してみようと思います。

実装

See the Pen Photo frame by Yoriyasu Nishimura (@yori3) on CodePen.

解説

htmlは外側の枠であるframeというクラス名のdivタグとその内側に画像を入れるboxというクラス名のdivタグで構成されています。

boxクラスの擬似要素で白背景で1辺だけborderをつけた正方形を作り、それぞれ斜めに回転させて、画像にやや重なるように右上と左下に配置しています。それにより写真が切り込みに差し込んで固定されているような表現になります。

ポイントとしては切り込み（擬似要素の辺）の長さが画像から少しだけはみ出るようにすることで、リアリティが出るかと思います。

まとめ

以前、いろいろサイトを見てたときに見つけたものを自分で再現してみました。

ギャラリー的な要素などで利用できそうな小技なので、覚えておいて損はなさそうです。

サイトのお問い合わせフォームといえばWordPressのサイトであればプラグインを入れたり、静的なサイトだったらフリーのphpのメールフォーム（こんなのとか）を入れたりするのがよくある対応ですが、今回はGoogle formをサイトに連携してお問い合わせフォームを作る方法をやってみたいと思います。

概要

Google formはそのままサイトに埋め込むこともできるのですが、それだとサイトのトンマナにあっていないため使いづらかったり、サイトのコンテンツとしてみなされずスルーされる可能性も考えられます。

そこでGoogle formを利用しつつ、デザインをカスタマイズして、実用性のあるフォームの作成を考えていきたいと思います。

DEMOはこちらに

フォームのページ

▼もとになったフォーム
https://docs.google.com/forms/d/1eQHZhmrpjji7wn_9eZI2vIJdM1weV2C2wM_LmaLXBkU/edit

実装方法

まずはGoogle formを新規作成して必要な項目を追加します。
作成したら発行されたリンクでフォームを開き、ディベロッパーツールでソースを参照します。
すると、このフォームのaction属性と各項目のname属性を取得することができます。
これを後ほど実装したフォームで使用します。

htmlは実際のフォームと変わりなくinputタグやselectタグなどを用いて作成していきます。
そのほかのdivタグやpタグを使っても問題ありません。

作成したhtmlに先ほど作成したフォームからaction属性とname属性をコピーしてそれぞれの項目に貼り付けます。

ここで一度フォームを送信してみましょう。先ほどのフォームに回答が送られているはずです。

今の段階でフォームを送信すると、Google formの完了画面に遷移してしまうと思います。
これだと急に外部サイトに移動してしまってユーザーとしては使いづらさを感じてしまいます。

そこで同じサイト内の完了ページに遷移するようにしてあげましょう。

まずあらかじめ完了ページのhtmlを用意しておきます。

それからフォームのhtmlのほうに戻り、formタグに target=”hidden_iframe” と onsubmit=”submitted=true;” を追記します。

<form action="https://docs.google.com/forms/~~~~~~" method="post" target="hidden_iframe" onsubmit="submitted=true;">

そしてformタグの閉じタグの後に以下を記述します。

<script type="text/javascript">
  var submitted = false;
</script>
<iframe
  name="hidden_iframe"
  id="hidden_iframe"
  style="display: none"
  onload="if(submitted)  {window.location='完了ページのパスを入れる';}"
></iframe>

これで送信後、用意した完了ページに遷移するかと思います。

ただフォームを実装するだけならここまででいいのですが、より実用的なものにするために確認画面を実装していきます。

フォームの画面はオリジナルのものですので、確認画面というものは存在しません。ということで自分で用意していきます。

と言っても確認ページに一度遷移してから完了画面に遷移させるというのは技術的にかなり難易度が高い話・・・

ということで今回はJSの力を使います。

簡単に説明すると、入力項目の下に、確認画面用のhtmlをあらかじめ用意して非表示にしておき、確認ボタンをクリックしたときに、入力内容を入れた状態で表示させる、という方法を取ります。

①まず、確認画面のhtmlを記述します。
場所はformタグの中であればどこでいいですが、入力のhtmlの下あたりがわかりやすくてよさそうです。
この確認画面のhtmlの後に送信ボタンを設置します。

②次に確認画面のhtmlと送信ボタンを非表示にし、入力のhtmlの後に確認ボタンを設置します。

③そして、確認ボタンをクリックすると、フォームに入力された内容をそれぞれ確認画面の表示位置に入れた状態で確認画面を表示する処理をJavascriptで記述します。

<form action="https://docs.google.com/forms/・・・・" method="post" target="hidden_iframe" onsubmit="submitted=true;">

～～～入力のhtml～～～

<button type="button">確認する</button>

<div class="formConfirm" id="confirm">

～～～確認のhtml～～～

<button type="submit">送信する</button>

</div>

</form>

↑コードの一例

最後に自動返信メールの実装を進めていきましょう。

ここはGoogle form のアドオンを利用します。

「Email Notifications for Forms」というアドオンを導入します。
https://workspace.google.com/marketplace/app/email_notifications_for_google_forms/984866591130?hl=ja

その名の通りメール関係の機能がいろいろあるアドオンですが、今回は「Create Email Notification」を選択します。

すると画面右下に設定画面が出てきますので、自動返信メールの設定をしていきます。

「Submitter Email Field」という項目が送信先に使用するフィールドです。
「How would you like to create the email template for notifications?」というところでメールの文面を編集できます。html編集もあるので、htmlメールも行けるかも。

こちらは無料プランだと位置に20件までしか送れないので、実用性を考えると有料プランになってしまうかと思います。

メリット・デメリット

構築が簡単

Googleの機能を使うので、比較的簡単にフォームの構築を進めることができます。
送られたメールもスプレッドシートに送ることができるので、管理がしやすいです。

Googleに依存する

Googleの機能を使っているので、Google側で変更があってこれまで通りの運用ができなくなった場合にほかのサービスに乗り換えるなど対応が必要になります。
また、機能によっては有料のものがあり、条件に該当する場合は導入までのハードルになりえます。

まとめ

Google formを利用してのお問い合わせフォームの構築は比較的簡単に進めることができ、もともといろいろな機能が用意されているためカスタマイズもしやすいです。

フォームの選定でお悩みの場合は一考の価値ありそうです。