5分でプロに見せる小技集
ほぼ時間がかからないのに、サイトやプロジェクトの完成度がグッと上がる小さな改善。
5分しかかからないのに、不釣り合いなほど大きな差を生む改善があります。僕がいつもやるやつ——労力が少なくてインパクトが大きい改善。「週末プロジェクトっぽい」と「ちゃんとわかっている人が作った」の違いを生みます。
ちゃんとしたファビコンを追加する
タブにデフォルトのブラウザアイコンが表示されるほど「未完成」を叫ぶものはありません。サイトのデザインが美しくても、ファビコンがないと下書きに感じます。
ロゴ（あるいは1文字だけでも）をファビコンジェネレーターに通して、ファイルを追加。2分で、サイトが一気に本物っぽくなります。
SVGを最適化する
SVGアイコンやイラストを使っているなら、エディタのメタデータ、不要な要素、冗長な属性で膨らんでいる可能性が高いです。
デザインツールからエクスポートした典型的なSVGは15KBくらい。最適化すると3KB。見た目は同じで、データは80%削減。
SVGをオプティマイザーに通してオリジナルと入れ替え。ページ読み込みが速くなって、誰も違いに気づきません。
CSSとJavaScriptをミニファイする
開発中のコードにはコメント、空白、わかりやすい変数名があります。可読性には最高。
本番用？全部削ぎ落としましょう。ミニフィケーションはブラウザが不要なものをすべて削除し、ファイルサイズを30-60%カットします。
ほとんどのビルドツールはこれを自動的にやります。でもビルドステップのない素のファイルやシンプルなサイトで作業しているなら、コードミニファイアで一発です。
OpenGraph画像を修正する
サイトのURLをSlack、Twitter、iMessageでシェアしてみてください。何が表示されますか？
白紙のプレビューやランダムなスクリーンショットなら、OpenGraph画像が設定されていません。これは誰かがあなたのリンクをシェアした時に表示される画像です。
サイト名と簡単な説明を入れた1200x630の画像を作成して、HTMLのheadに設定。5分でできて、シェアされたリンクが壊れた感じではなく、意図的に見えるようになります。
ちゃんとしたエラーページを設定する
サイトの壊れたリンクにアクセスしてみてください。何が起きますか？
デフォルトのサーバーエラーページや真っ白な画面なら、直しましょう。ホームページへのリンク付きのカスタム404ページは10分で作れて、デッドリンクに辿り着いた訪問者を救います。
シンプルに：「このページは存在しません。こちらのページはどうぞ。」
画像をもう一度圧縮する
はい、もうやったのは知っています。でも先週追加した画像は圧縮しましたか？クライアントが4MBのPNGでメールしてきたロゴは？
画像圧縮は一回やって終わりのタスクではありません。新しい画像はすべて同じ処理が必要です。つい省略してしまうなら、ワークフローの一部にしましょう——アップロードの前に、毎回圧縮。
ローディング状態を追加する
ページがデータを取得したり、重いコンテンツを読み込む場合、待ち時間中に何か表示しましょう。スピナー。スケルトンスクリーン。プレーンテキストの「読み込み中...」でもいい。
2秒間白紙のページは壊れたように感じます。2秒間スピナーがあるページは普通に感じます。待ち時間は同じ。体験はまったく違う。
モバイル表示をチェックする
スマホでサイトを開いてください。実際に見てください。ボタンをタップ。フォームに入力。
美しくレスポンシブなサイトで、モバイルのキーボードの裏に「送信」ボタンが隠れていたのを見たことがあります。実機でテストしなかったから誰も気づかなかった。
仕上げとは完璧を目指すことではありません。「何かちょっと違う」と思わせる要素を排除すること。ファビコン、最適化されたアセット、きれいなエラーページ、まともなモバイル体験。どれも5分もかからないのに、合わせると全部が意図的に感じられるようになります。