このたび個人事業主 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の高解像度ディスプレイで閲覧した時に間延びする印象を受けました。横に長過ぎる文章は非常に読みづらく、無駄にスペースが空いてしまってどうにも気持ち悪さがあります。文章を読ませるサイトでは幅を固定あるいは制限した方が良いかもしれません。

おしまい

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

リニューアル

こんな感じになりました。 以前のデザインはもう5年ぐらい前に制作した物なのでだいぶ古臭さがあり、ゴチャゴチャしていて少々読みづらい所がありました。 今回は、とりあえずシンプルにすっきり読みやすくしたいというクライアント（自分）の要望に沿ってデザインしてみました。

シンプルにはなったものの、わりとバッサリ色々な物を切り捨ててしまい、足りない要素や導線等があったりするので、 そこは追って微調整を繰り返して行きたいですね。

気をつけた点・方向性など

• 前バージョンはフロントが重かったので、できるだけスムーズに描画されるように
• 不要そうなもの（むしろ必須ではないもの）は極力省く
• 極端に言えば本文が読めれば・読みやすければそれでいい

位置固定のフッタが邪魔だ！という声が聞こえてきそうですが、敢えて触れません。

これから

アーカイブを見て分かる通り最近は更新が少々滞り気味ですが、これからも思いつきでポストして行きたい所存です。 今後とも何卒よろしくお願い致します。

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

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

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

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

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

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

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

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

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

これはなに？

• CoDogue – ちょこざいなツール格納庫

「CoDogue」は「コドーグ」と読みます。
タイトルどおり、ちょこざいなツールを格納していくサイトです。

ちょこざいなツールは各地にあると思いますが、
1サイトにまとまっていたら便利なのではないかと思い作ってみました。
まだ2つしかツールはございませんが、じわじわと増やしていくつもり。

初期メンバーを軽く紹介など。

MkPasswd

そんまんまです。パスワードを生成します。
使う文字種と文字列の長さ、生成する数を指定できます。
オマケ機能として、テキスト形式でダウンロードできます。

TsvTo

TSV形式のテキストデータを様々な形式にコンバートするツール。
以下の形式に対応。

• JSON
• XML
• PHP array
• HTML Table

例えば、ExcelやGoogleドキュメントのスプレッドシート上のデータをコピーして、
それをペーストしてコンバートしたりして使います。
数値とブール値ぐらいはそれっぽくしてくれます。

ご要望、不具合等ございましたら是非に。

• Matsukaze. -Anything for WWW-

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

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

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

取り急ぎご報告まで。

• CMSを変更するにあたって、デザインも全て刷新しました。
  
  CSS3等の都合から、一部のブラウザでは違った表示/挙動になります。
  
  ※各プロパティが用意されていないブラウザでは、代替のスタイルが適用されます。
  
  ※IEのfilterでの代替はしていません。
• 古い閲覧環境では、CSSがぶった切られてメッセージが表示されます。
• ウィンドウサイズによるCSS切替を試験的に実装しています。

その他の情報はこちら

今後ともよろしくお願い致します！

移行が済みましたらまたお知らせ致します。
移行中何かとご迷惑をお掛けするかもしれませんが、
今後とも何卒宜しくお願い致します。

まっは。