このたび個人事業主 MATSUKAZE. のWebサイトをリニューアルしましたのでご報告いたします。

ドメインも装いも新たに

MATSUKAZE.design

旧サイト（www.mach3.jp）からドメインを改めて生まれ変わった「MATSUKAZE.design」です。自分的にナウいアレコレを盛り込んで創ってみました。制作期間はおよそ一ヶ月。

リニューアル自体は去年のはじめから進めてはいたのですが、2018年は色々と学ぶことが多かった年で、年末にそこまでに行った全てを無かった事にしたい衝動に駆られ、勢いだけで制作した一品です。お収めください。

技術的な話

技術的にはそんなに大層な事はしていませんが記録として四方山話をここに残しておこうと思います。

TL;DR

• Nuxt + Netlifyははかどるぞ
• NuxtでextractCSSは避けるべき
• Slack送信はお手軽で良い
• 読ませるサイトにリキッドレイアウトは不向きか

Nuxt + Netlify

Nuxt.js を使って静的サイトをジェネレートして Netlify にデプロイしています。

Vueはこれまでも触ってきましたがNuxt.jsについてはこれが初見でした。簡単に説明しておきますと、Vueとそれにまつわる便利なアレコレをパッケージングしてプロジェクトをクイックスタートするためのフレームワークです。名前からもReactのNextを模したものと言ってよさそうです。

Nuxtは静的ファイルの配信機能も備えていて、Nuxt自体が静的サイトジェネレータとして機能します。今回使っているのはこれですね。

一方のNetlifyは、このNuxtの静的サイト配信機能と非常に良くマッチしています。Nuxtで静的サイトを出力するために nuxt generate というコマンドを使用するのですが、これをNetlify側で自動で行ってくれます。（勿論そのように設定する必要はありますが）

図解するとこんなイメージ :

制作者が行うのはリポジトリへのpushだけで、あとはNetlifyがその変更を検知してサイトを再ビルドして公開してくれます。便利な世の中になったものです。

extractCSSには罠が潜んでいる

結論から先に書くと、extractCSSはtrueにすべきではないと考えます。

NuxtではデフォルトでCSSをHTMLファイル内に展開します。つまりドキュメントの style 要素の中にそのページで使用されているスタイルをすべて出力するのです。旧来のWeb制作者の感覚ですとCSSは別ファイルにしたい気持ちがあるかもしれません。その場合は nuxt.config.js 内で extractCSS: true にするという設定が必要になります。

しかし、この extractCSS は落とし穴があります。仕組みとしては恐らく

1. インポートされた vue ファイルの style セクションに書かれたスタイルを抽出
2. それを一旦まとめたものを適正なサイズに切り分けてcssファイルとして出力する

といった感じだと思われ、その役割を担うのが mini-css-extract-plugin なのですが、これが時折エラーを吐きます。

WARNING in chunk …  [mini-css-extract-plugin]
Conflicting order between:

Conflicting order とあるのでコンポーネントを読み込む import 文の順番を少しかえて見たところ、改善したり、逆にエラーが増えたりする症状が見られました。WARNING in chunk なのでcssファイルに切り分ける段階でプラグインがパニックを起こしているのではないかと推察します。

それとは別の問題として、ページを訪問した際に一瞬表示が乱れる不具合が発生しました。これも推測に過ぎませんが、切り分けられたスタイルの読み込み順が制作者の意図を担保出来ないので起きている現象ではないかと思います。最終的に描画されるスタイルは正しい形ですが、MATSUKAZE.design の様にアニメーションを使用しているページでは、読み込み時にかなり滑稽な挙動をします。

そもそもHTMLファイルにスタイルシートを直接展開するのはリクエストを減らしてページ描画までの時間を短縮しようという意図に則った物だと思うので、そこでわざわざ別ファイルに分けるのは愚策なのでしょう。どうしても別ファイルにしたいのならば nuxt.config.js で webpack の設定を拡張して1ファイルにまとめる方法を選択した方が良いと考えます。

クイックコンタクト（Slack）

お問い合わせフォーム とは別に、「クイックコンタクト」という物を設置しました。お問い合わせフォームはメールが送られますが、クイックコンタクトはMATSUKAZE.のSlackにダイレクトメッセージが送られます。クイックコンタクトは全てのページの右下のボタンからアクセスできます。

Slackへの送信のあまりの手軽さに「これだけで良いのでは（メールフォームいらないのでは）」という思いもありましたが、これは「自動返信メール」を送りません。自動返信メールが必要かどうかという議論は脇に置いておいて、送り先も安心と信頼のEメールであるべきという考えもあり、両方実装しておきました。

匿名でOKで自動返信も不要で、かつ重要度の高くないフィードバック等の送信はSlackで十分そうですね。

リキッドの悩み

今回、幅を制限しない純粋なリキッドレイアウトを試みてみました。タブレット・スマートフォン向けのレスポンシブ対応が幾分か楽になった一方で、PCの高解像度ディスプレイで閲覧した時に間延びする印象を受けました。横に長過ぎる文章は非常に読みづらく、無駄にスペースが空いてしまってどうにも気持ち悪さがあります。文章を読ませるサイトでは幅を固定あるいは制限した方が良いかもしれません。

おしまい

フリーランスにとって自サイトの制作は怠りがちになってしまいますよね。なってしまいますよね？しかし、自サイトは蓄えてきた知見の復習と新しい物の実験が存分に出来る楽しい砂場です。すきあらば挑戦していきたいですね。

Matsukaze. – Webのなんでも屋さん。

Matsukaze. – Webのなんでも屋さん。

「松風」は、横浜を拠点とするフリーランスのWebコーディネーターです。Webの企画・デザインから開発まで、様々なオーダーに幅広く対応しております。

以前の構成から一新して「松風は何をしてくれるのか」をもう少し噛み砕いて説明しています。 また、去年末のアドベント・カレンダーで作ったアイコンを随所で活用してみました。

（初心者向け）松風Web制作講座

かなり実験的な試みではあるのですが、 初心者向けのWeb制作講座をマンツーマンの個別指導形式で開講してみることにしました。 駆け出しなので形式などはまだまだ変動する可能性がありますが、 ご興味のある方はお問い合わせください。

なお、この講座は初心者向けですので、 プロフェッショナルで現役バリバリのフロントエンドマンの方々、 特にむしろ私が教えてほしいレベルの方は、ひらにご容赦ください。

つぎはブログをリニューアルしたい

次はこのブログです。 もう5年くらいこのままなでデザインも古臭い感じになってしまいましたので、 いい加減リニューアルを進めたいですね。

こんなのです

Matsukaze. – Webのなんでも屋さん。

「疾さ」を表現する為に動きに一工夫してみましたので、見てもらえると幸いです。

例えば、実験的に、スライダーにブラーの効果をつけています。
詳しくは後日記事にしようと思いますが、ぼかした画像を重ねて表示して表現しています。

まとめ

フリーランスの方々は自分のサイトだからこそ苦労する事も多々あるでしょう。
特にWeb系の方は世の中の技術の進化も著しく、試してみたかった表現が出来上がった頃には古臭く感じるという事もあったりしますね。

私も遅々として進みませんでしたが、また新たな発見もあるので、リニューアルも良いです。お勧め。

• Matsukaze. -Anything for WWW-

これで正面玄関と窓口が出来ました。
というか今までなんで無かったの…？

Matsukaze.（松風）ってのは屋号です。
口座の頭にもくっつけてるんですが、
銀行窓口で「松風様～」とか呼ばれるとなんかこそばゆいですよね。
すごくどうでもいい話ですね。

紹介可能なコンテンツがここしかないのはまだ変わらずですが。
こちらはもうちょっと時間を頂きたく…！

取り急ぎご報告まで。