こんにちは！
最近暑すぎて飲み物の消費量がとんでもないことになっています。
みなさんもしっかり水分補給などして夏バテ対策などしていきましょう！

早速ですがタイトルの件について。
wordpressなどでWebサイトを作るときはContact form 7や、MWWP Formなどを使うことが大半かと思いますが、htmlでサイトを制作する際はどうやって制作しようってなることありませんか？

今回は実際に実務でも利用することのあるEasymailについて紹介しようと思います。

Easymailの詳細はこちら

Easymailのいいところ　その１ 導入が簡単

EasymailはURLとして設定したいディレクトリにデータを入れてそのURLへアクセスするだけで
wordpressなどでもあるようなインストーラーが立ち上がってブラウザ上でインストール設定などを行うことができます。

また、管理画面上で入力項目などを管理できるので”ほぼ”ノーコードでフォームを作成することができます。
※フォームのデザインを変更する際は内部ファイルを修正する必要があります。

ただ、１つ注意が必要な点がありまして、データベースが必須となります。
なのでデータベースにアクセスできる状況もしくはデータベースのログイン情報などを渡してもらえるクライアントワークの時しか
使えないというデメリットもあります。

インストール方法の詳細はこちら

Easymailのいいところ　その2 多種多様な入力形式

その１でも記載しましたが、Easymailの操作はほとんど管理画面から行うことができます。
なぜほとんど管理画面で操作が完結できるかというと豊富な入力形式がプリセットとしてすでに組み込んであるからです。

項目についての詳細はこちらをご覧ください。

ほとんどが上記ページの項目で制作しきれるのですが、微妙に対応していない部分があるので
自分が意図しないような動作をすることがあるので導入時は必ずテストをすることをお勧めします。
弊社でも以前「全角カタカナ入力」で制限をかけた際に半角スペースはもちろんのこと全角スペースも制限に引っかかってしまい
うまくフォームが動作しないということがありました。
名前をフルネームで入力するフォームでスペースを入れる人が一定数いることにも驚きましたが、
そういった意図しない動作で送信がエラーになることもあるのでEasymailに限った話ではないですが、社内などでも意見をもらいながら入力テストをしていくと良いかと思います。

Easymailのいいところ　その3 顧客管理が楽

Easymailは管理画面から受信の履歴を見ることが可能です。

Easymailのアカウントも複数発行することが可能なので、クライアント用のアカウントを発行して受信履歴などを見れるように提供すると結構喜ばれます。
後、ちゃんと許可は貰わないといけないですがどういった客層が問い合わせにきているのかなども管理画面上で確認できるので、広告運用などにも役立つことがあります。

顧客管理の詳細についてはこちらをご確認ください。

Easymailのいいところ　その4 もちろん対応googleツールズ

Google reCAPTCHA→デフォルトで登録できます！

Google アナリティクス→プラグイン入れたら対応できます！

最高ですね。めっちゃwordpress。正直超楽です。

まとめ

フォームって結構導入めんどうだったり設定が大変だったりありますが、
Easymailは本当に楽で使いやすいです。
多少データベースをいじったりするシーンもあるので是非一度ローカルサーバーなどで試してみてください。

今日はこの辺で失礼します。

優良WEB様にて名古屋市の優良なホームページ制作会社として紹介していただきました！

記事の詳細はこちら。

ご紹介いただきありがとうございました！

お久しぶりです！随分ご無沙汰してしまいましたが、表題の通りホームページを制作する上で注意していることを制作会社的観点でメモも兼ねて書き記していこうと思います。（諸説あり）

１.ホームページの全体像の把握

どんな作業でもなるべく効率化したいというのは世の常だと思います。
ここで重要なのは「どのページにどんなパーツがあるのか」、「どのパーツは使い回しが効きそうなのか」です。これは「手を抜く」という訳では決してなく、上記のようなことを把握しておけば力の入れるべきページに１００％以上の力を使えると言う考え方です。

2.ではどうやって共通化できるパーツを管理するのかを考える

共通化できるパーツとしてすぐに思い浮かぶものが「ヘッダー」と「フッター」かと思います。
これはまあ日本語で言うと頭と足で、頭がへんてこだとぱっと見の印象が最悪ですし、足がへんてこだとページ全体の締まりがめちゃくちゃ悪くなります。
また、ヘッダーに関してはページ全体を行き来するためのメニューなども大体の場合は内包しているので、ここの使い勝手が悪いとページ全体の印象も悪くなります。
そういった観点からここは毎回そこそこ時間を取って作ってます。

ヘッダーとフッターもそうですが、flexboxを使って横並びにするボックスなどは
ホームページでは多々出てくると思います。（諸説あり）
こういったものはモジュール化してしまってパーツごとにCSSを小分けに作成して、
微調整をページ固有のCSSで行うようにしています。

他にも共通化できるものはたくさんあります。
・ページのメインカラーやサブカラー
・コンテンツのインナーの横幅
・テキストサイズ
・ブレイクポイント

この辺の細かい設定はホームページを作り始める一番最初に全体のベースとなるCSSを作成して、
Scssの変数として全て入力してしまいます。
結構めんどくさい作業ですけど、これやっておくと毎回カラーコードの確認したりとか、
ページごとにちょっとずつコンテンツ幅が変わって気持ち悪い感じには絶対ならないので、やって損はないです。まじで。

この辺の内容に関しては過去の記事でも紹介しているので、
興味が湧いた方は是非ご覧ください！
CSS設計ってどんなもの？

3.idやclassなどの命名規則のすり合わせを忘れない

これ忘れると大事故になります！！絶対にやってください。
バイトとかで制作会社に行ってる方とかもディレクターとか上司の人にしっかりどうするか聞いてあげるとにっこりしてくれますよ。多分。
まあそれくらい大事なことだと思ってるんですけど何が大事なんだいという話。
ちゃんとすり合わせしておかないと、管理がめちゃくちゃにめんどくさくなります。

色々なケースがありすぎるので、よくありそうな事例だけあげますが、
・どこに何のスタイルが効いているか全然わからない。
・修正箇所を特定するための検索がすごく不便になる、

ページ数が多くなればなるほど関わる人も増えると思います。
だからここはしっかり擦り合わせて分かりやすくて可読性のあるコーディングをしましょう！

まとめ

今回はTipsというよりかは何を考えてホームページ制作を行うのがいいのかということを書いてみました。自分が何を考えてコーディングしたいのかを再度整理できていい機会になりました。
もちろんこの辺の考え方は制作会社によって様々だと思うので、あくまで一ホームページ制作会社の考え方として
参考にしていただければ幸いです！！

コーディングをする際、CSS設計を導入していますか？
小規模なサイトやLPでは、CSS設計は意識せずとも大きな問題はありません。
しかし、サイトの規模が大きくなるにつれCSS設計は必須になります。

良いCSSとは

GoogleのエンジニアであるPhipi Walton氏が言及した「良いCSS」が以下4点。
・予測可能な
・再利用できる
・保守可能な
・拡張しやすい

予測可能
1つのサイト制作で関わる人は必ずしも自分1人ではないですよね。
自分以外の人がそのコードを見たときにどのようなコードなのか読み解けることが重要です。

・クラス名を省略しない

<p class="txt">テキストが入ります。</p>

<p class="text">テキストが入ります。</p>

text以外にも
・button → btn
・title → ttl
・description → desc
などなど。
チーム開発の際、チーム内でどの単語は省略する・しないとルールが決まっているなら大丈夫ですがそうで無い場合、「ここは省略しているのにここは省略していない」なんてことがほとんどです。クラス名に一貫性がなく可読性の低い読みにくいコードになってしまいます。
基本的にクラス名を省略するメリットはクラス名を短くする以外、ほとんど無いので誰が読んでも理解できるように省略しないクラス名を推奨します。

再利用可能
既存のパーツを別の箇所でも使用したいとき、スタイルを書き直したりする必要がない状態を再利用可能な状態と呼びます。

See the Pen
Untitled by sakurai-ex (@sakurai-ex)
on CodePen.

例えば上図のように、一番上のhtmlを見てみるとcardの中身にテキストとボタンがあります。
ボタンはカードの中身以外でも使う場面は想定されますが、CSSを見てみると

.card .button { 
  padding: 10px 40px; 
  background: orange; 
  text-decoration: none; color: #fff; 
}

上図のように.cardの中の.buttonと限定的な使用方法になっています。
これではCSSSは再利用ができないです。可能な限りCSSの詳細度は低くしましょう。
なので今回の場合の理想的なCSSは

.button { 
  padding: 10px 40px;
  background: orange;
  text-decoration: none; color: #fff; 
}

上記のようになります。

保守可能
サイト内で新しい機能を追加・更新をする場合に既存のCSSを変更しないと表示崩れが起こってしまう状態は望ましくありません。

See the Pen
Untitled by sakurai-ex (@sakurai-ex)
on CodePen.

例えば上図のように、cardというブログ記事がcotainerに囲まれています。ブログ記事が5個の時、下の2記事が両端に離れてしまい思った通りの見た目になりません。
しかし、ブログ記事は常に更新されていくものなので、ブログ記事がいくつあるときでも期待通りの表示にしなくてはなりません。

拡張可能
拡張可能なCSSとはCSSに携わる人が何人でも問題なく、管理できる状態を指します。
そのため、CSS設計のルールは分かりやすく、新たにチームに加わる人がいても学習コストが小さくなる状態である必要があります。
つまり可能な限り分かりやすく、簡単なルールで設計を行いましょうというものです。

まとめ

HTML, CSSは奥が深いと言いますが、まさにそうだと思います。
今までCSS設計をあまり意識してこなかったという方はこれを機に意識してみるとコーディングの速度も楽しさも倍になると思います。。。！

次回は具体的なCSS設計方法について書いていきます。