このたび個人事業主 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年ぐらい前に制作した物なのでだいぶ古臭さがあり、ゴチャゴチャしていて少々読みづらい所がありました。 今回は、とりあえずシンプルにすっきり読みやすくしたいというクライアント（自分）の要望に沿ってデザインしてみました。

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

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

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

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

これから

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

フロントエンドで出来ること

CSSは一番はじめにロードする

スタイルシートに含まれる背景画像のロードと、
ページのレンダリングを出来るだけ早くおこなう為です。

JavaScriptは一番最後にロードする

JavaScriptは</body>の直前あたりでロードするのがパフォーマンスが上がる様子。
ただし、レンダリング前に処理したいケースもあるので、可能な限りで。

CSS/JavaScriptは圧縮しよう

ツールを使って、CSS/JavaScriptファイルを最小化してあげましょう。
YahooライブラリにあるYUICompressorは、CSS/JS両方を圧縮出来るのと、
ついでに軽くバリデートしてくれるのも助かりますね。

使用例など。

java -jar yuicompressor-2.4.2.jar -v --charset UTF-8 -o hoge.min.js hoge.js

• YUI Compressor
• YUI Compressorをお手軽にするバッチファイルを書いてみる

また、導入が面倒な場合はオンラインツールも公開されています。

• Minify CSS – Compress CSS Code
• Free Javascript Compression and Minify Javascript Resources – Minify JS

HTTPアクセスを減らす

大量のJavaScriptやCSSをロードしているページはご注意を。
可能な限りファイルを纏めて、HTTPアクセスを減らしてやると良いようです。

<script type="text/javascript" src="hoge.js"></script>
<script type="text/javascript" src="fuga.js"></script>
<script type="text/javascript" src="foo.js"></script>
<script type="text/javascript" src="bar.js"></script>

<!-- ↓ ファイルをまとめて圧縮 -->

<script type="text/javascript" src="mylibraries.min.js"></script>

また、大量の画像を部品として使用する場合は、
CSS Spriteなどを利用してまとめてあげると良いですね。

CSSの@importを避ける

@importによるインポートは、に比べてパフォーマンスが落ちるそうなのでご注意を。
むしろ、ひとつのCSSファイルにまとめてあげて圧縮するのがベストですね。
それが面倒だと感じる場合は、LESSやSassのような開発ツールの導入も検討してみましょう。

• LESS – Leaner CSS
• Sass – Syntactically Awesome Stylesheets

DNSルックアップを減らす

広告やGoogleAnalytics等で致し方ない場合の方が多いですが、
出来るだけ別ドメインからのファイルインポートは避け、
DNSルックアップを減らすのが吉です。

サーバサイドで出来ること

Expiresを設定する

ヘッダの有効期限を適正に設定する事で、更新頻度の低いファイルをキャッシュさせます。
※ApacheのExpiresモジュールが有効になっている必要があります。
cf) mod_expires – Apache HTTP サーバ

.htaccessでの設定例。
有効期限の初期設定を1ヶ月に設定しています。

ExpiresActive On
ExpiresDefault "access plus 1 month"

もしくは、ファイルの種類毎に設定を変えたい場合の例がこちら。

ExpiresActive On
ExpiresByType text/css "access plus 1 week"
ExpiresByType applicdation/javascript "access plus 1 month"
ExpiresByType image/png "access 3 month"

YSlowでチェックしてみる

サイトパフォーマンス測定ツールとしては、こちらもYahooから提供されている、
FirebugプラグインのYSlowが良い感じです。

インストールするとFirebugに「YSlow」タブが追加され、
閲覧しているページのパフォーマンスを測定する事が出来ます。
細かく項目別にA～F判定を行ってくれるので、
チェックすべきところがすぐに分かり、目安として使えそうですね。

• Yahoo! YSlow for Firebug

Webデザインは年々リッチになりつつありますが、
その分フロントエンドのパフォーマンスは注意しておきたいですね。

BrowserDetect.js

JavaScript – Browser detect

ダウンロードリンクはどうやら無いようなので、
ページ内に書かれたソースをコピー&ペーストします。
使い方は簡単で、スクリプトをロードして
BrowserDetectオブジェクトのプロパティを参照するだけ。

var browser = BrowserDetect.browser; //ブラウザ名の取得
var version = BrowserDetect.version; //ブラウザバージョンの取得
var os = BrowserDetect.OS; // OS名の取得

クロスブラウザCSSを書く準備

もしModernizrを使用した事があればご想像の通りですが、
HTML要素にブラウザ名とバージョンを添えたクラス名を動的に追加してやります。

$("html").addClass( BrowserDetect.browser );
$("html").addClass( BrowserDetect.browser + BrowserDetect.version );

例えばIE6でアクセスすると、HTML要素には次のようにクラスが追加されます。

<html lang="ja" class="Explorer Explorer6">

CSSを書く

あとは子孫クラスタを使ってCSS内で条件分岐をしてやれば良いです。
ハック等に頼らないクリーンなCSSが出来上がりますね。

#Box{
    /* デフォルトのスタイル */
    width:290px;
    height:210px;
    border:5px solid #666;
    padding:10px;
}
.Explorer6 #Box{
    /* IE6用のスタイル */
    width:320px;
    height:240px;
}

この方法の問題点

JSが働かないとだめ

当たり前ですが、JavaScriptが動かない環境ではデザインが崩れる事が予想されます。
（Modernizr使ってる時点で今更何を言ってるのって感じですが…）

HTML4ではHTML要素のclass属性はInvalidである

class属性が使用出来る要素について、
HTML5では「The Every HTML Element」と言及している事から問題はなさそうですが、
どうやらHTML4ではInvalidになる様子。
これもまた、Modernizrも同様に孕んでいる問題点です。
（一体誰が気にするのか、とも思いますが）

以上の問題を踏まえて、
プロジェクトの趣旨/性格に基づいて使用を判断したいですね。

1. 自己管理

フリーランスは自分で自分を管理しなければなりません。
時間を管理してくれる人も、お金を管理してくれる人も、
仕事を運んできてくれる人もいません。
それら全てを自分でコントロールしなければならないのです。

特に、時間の管理は自由であるがゆえに非常に重要。
以下の記事にも詳しく書かれていますが、
15 Steps to a More Productive Workday | Vandelay Design Blog
一日の中でもっとも集中出来る時間を見極め、
その時間を重要な（対価が得られる）作業にあてる事が肝だと感じました。

複数のプロジェクトが並行して動いている時は、
物事の優先度をしっかりと把握しなければなりません。
その為に、日毎/週毎のToDoリストを活用すべきでしょう。

作業への集中が散漫になる事を防ぐために、
例えばメールをチェックする時間を予め決めておき、
それ以外の時間はメーラーを閉じておく
等といった小さなTipsも参考になります。

2. コミュニケーション

窓口が自分自身のみとなる事から、コミュニケーションも極めて重要な要素です。
クライアントの要望を適切に汲みとるためのヒアリングは勿論、
円滑なコミュニケーションはより良い成果物を生み出します。

それを怠った場合はどうなるか。
確認が行き届かなかった為の誤解が生じ、
修正がかさむ事でかえって作業が滞ってしまいます。
結果、クライアント側で不満が生じれば、次はありません。

また、納品後のクライアントに対しても、カスタマーサービスを提供しましょう。
継続的な受注が見込めれば、目標達成への大きな一歩となります。

3. 日々是勉強

Web業界などは特にそうですが、日々技術は進化しています。
新しい技術には常にアンテナを働かせ、
自身のスキルを向上させてそれらに対応出来るようにしなければなりません。

ただし、これは成功する為の一要素に過ぎず、
前述した他の重要な要素を疎かにしては目標達成へは結びつかないでしょう。

と、非常にざっくりとまとめてみましたが、
出来ていない部分は多々ありますね。精進しなければ…。

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF) – Smashing Magazine

こんな感じにデザインされています。
いつぞや紹介したVIエディタのチートシートと同じデザイナーさんが手がけています。
テイストが同じですね。

新しく追加されているプロパティについては
現状ではまだブラウザ独自の書式を使わざるをえませんが、
そこらへんも考慮して、各ブラウザの記法とスタンダードの記法を明記してあります。
これは助かりますね。

CSS3だけでなく、CSS2のチートシートのリンクも掲載されているので、
そちらも大いに活用できそうです。

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF) – Smashing Magazine

Second Wind on Vimeo

少しデフォルメの効いたキャラクターが、
すごく豊かな表情と愛嬌のある動きでストーリーを綴っていきます。
背景の雰囲気も趣きがあってすばらしい！

こちらも同じ作者さんが作られたアニメーション。
ラフスケッチっぽいグレースケールなキャラクターで
独特な世界観が生み出されています。

Ian Worrelさんのブログはこちらの模様。
数多くのスケッチが、出迎えてくれます。
(E)(N)’s BLOG

チェアがあるのかないのか。とにかくこれは無駄がない。
ただのベルトがポータブルなチェアに早変わり！

Chairless by vitra.

アメリカ先住民が似たような物を使用して座っているのを見てインスパイアされたのだとか。
この無駄の無いチェアはVitraの新作だそうですが、
現在在庫が無くなってしまっているようですね。
2010年6月まで待って！といわれました。

特設サイトでは生活のいろんな場面で座っている写真が閲覧できます。
スキー行った時の小休止なんかでちょっと使ってみたいです。

これは素晴らしい。爪先で操るマウスのデザインコンセプトです。

デザイナーのLiu Yiさんが手がけた、
手の不自由な方の為のマウスです。
親指で左クリック、人差し指で右クリック。

健常者でも両手がフリーになるので、
練習すれば高速なオペレーティングが可能になるかもしれません。
商品化されたら試してみたいですね。
慣れないうちは足がつりそうですが…。

さらなる詳細画像はこちらから
Toe Mouse For The Disabled by Liu Yi » Yanko Design

今日出会ったお気に入りな映像。
チルトシフトでニューヨークの街並みをかわいくくりぬいています。
音楽もいい感じ。

The Sandpit on Vimeo

これがきっかけでVimeoで動画をあさる作業がスタートしました。
是非HDで見ていただきたいので、ここからは埋め込みしていません。

Bathtub IV on Vimeo

シドニーの平和な浜辺で事件が！
途中「えっ　ちょっ　まっ」と思わせますが、見終わってから説明文読めば納得。
全部リアルの映像だというからすごい。

One day around the tower (Zaha Hadid – Marseilles) – Teaser version on Vimeo
どことなく壮厳な音楽にのせて、とあるタワーの一日を撮りきった作品。
ビューティフルサンライズ＆サンセット。

Fire (Jimmy Edgar Remix)-Codebreaker Feat. Kathy Diamond on Vimeo
健気に頑張るはたらくくるまが可愛い！！

Niagara Falls in Motion on Vimeo
カラフルに彩られたナイアガラが美しい。

Paris Vol. 1 on Vimeo
ちょっと趣向が違うかもしれませんが、
パリをロマンティックに切り取ったとてもクールな作品。
見ていると涎がたれてきます。

The Seventh Movement’s videos on Vimeo
今はVol.4 までですが、今後に期待ですね。