プロフィールサイトsunoho.comをリニューアルしました

f:id:sunoho:20200930192457p:plain

プロフィールサイトとかパーソナルサイトとかポートフォリオとかホームページとかよばれるあれをリニューアルしました。

sunoho.com

やりたかったこと

必要な情報にさっとアクセスできること以上にウェブサイトに重要なことはなく、この世のすべてのウェブサイトは阿部寛のホームページになるべきと思っているタイプのインターネットおじさんなのですが、令和にもなってそんなことばかり言っててもな…みたいな気持ちもあり、それならと前々から気になっていた CSS アニメーションに挑戦してみようと思ったのが発端でした。

加えて、リニューアル前がモバイルファーストで縦長ページな作りだったので揺り戻しでパソコンファースト(?)でワンページな作りにしました。

やったこと

CSS アニメーション

動きはすべて CSS で作り、タイミングの調整を JavaScript でやっています。本当は JavaScript を一切使わないで仕上げたかったのですが、どうせアクセス解析入れるじゃんと気がつきどうでもよくなりました。

インターネットおじさんはデザインのための不要なマークアップにも否定的な立場だったのですが、令和なので空 <div> 100 連発とかやってます。レンダリングが遅くなるかと思ったけどそんなこともなく。令和すごい。

CSS アニメーションをやっていて痛感したのは動画的な見せ方の知識が僕にまるでないということで、ウェブ制作にも動画の知識が必要な時代か~と思いました。来年はバーチャルユーチューバーになります。

Pug & SaSS

デザインを決めた時点で空 <div> 100 連発する必要がありそうだったので Pug を使ってみたものの、空 <div> 100 連発以外の部分であまりメリットを感じられず途中で放棄しました。

Pug に合わせて Sass (SCSS) も初めて使いました。セレクタを最短距離で引けるよう記述することで少しでも高速に…みたいな時代のインターネットおじさんにはネストから生み出される無駄に隔世の感を覚えます。どうせコンパイルするならもっと賢くやってほしい。mixin が使えるのは便利でした。

アニメーション png

キラッと光るバナーを CSS で実装したところやたら重たくなってしまったのでアニメーション png にしました。Safari がサポートして、LINE スタンプが採用して、いよいよ Chrome がサポートして、もうええんちゃうか。

しかし圧縮 png から生成した apng より無圧縮 png から生成した apng の方が軽くなるなどとてもむずかしいです。調べてもよくわかりませんでした。

CDN

index.html にすべてのコンテンツを詰め込んだためロードが激重になってしまい Cloudflare に泣きついてみました。思ったほど速くはなりませんでしたが 5G なのできっと大丈夫。

年に二、三回しか更新しないサイトなので次回の更新時にキャッシュの更新を忘れて反映されない~って泣いてる自分が見えます。

その他

  • Noto Sans JP を正式版にしたらめっちゃ速くなった
  • ボケっとしてたら CSS ファイル単体で 500 KB くらいになった
    • なんやかんやで半分まで減らしたけど十分でかい
    • 5G なので大丈夫
  • iOS 13 からスクロールバーをいじる系の CSS が効かなくなってた
    • それどころかスクロールバーが表示されない
  • スプラッシュ画面のアニメーションにウェイトを入れたせいで Google PageSpeed Insights のスコアが真っ赤になった
    • なにが SEO だ知るかバカ

まだへいき!のロゴをリニューアルしました

まだへいき!のロゴをリニューアルしました。シンボルマークがないタイプのロゴです。

f:id:sunoho:20200727150159p:plain

旧ロゴの思い出

もともと「まだへいき!」はブログの名前でしたが、2013 年頃から同人サークルの名前としても使用するようになりました。申し込み締切り間近になってサークル名がないことに気がつき安易に転用したのが諸悪の根源です。

f:id:sunoho:20200727143304p:plain
サークルカットにも使われている

旧ロゴは 10 年以上前にフォトショップで作った解像度 72 dpi しかないもので、とても印刷に耐えられるようなものではなかったのですが、コミケで面と向かって「このロゴ良いですね」と言われたことなどに甘え今日まで使い続けてきました。(ありがとうございました)

リニューアル作業

方向性を決める

まずは大きく方向性を決めました。

  • ウェブと印刷の両方で使えるもの
  • 日常系アニメのタイトルっぽく

前述のとおり印刷にも耐えられるものを作るというのが大前提です。

また、「まだへいき!」はひらがなと感嘆符だけで構成されていてかわいい系の雰囲気があるので日常系アニメっぽくとしました。

いくつか作ってみる

既存フォントを改造してみると「へ」と「い」の連続を間延びさせないよう調整するのが意外に難しく、フィーリングでやった方が良さそうだったので手書きでいくことにしました。手書きの方がかわいいっぽいし(?)。

画像は消えていますが 2018 年に作業中の写真を上げて匂わせツイートをしている形跡があります。ここから数えても 2 年は試行錯誤してるんですねえ。

f:id:sunoho:20200727144943p:plain
あまりにも恥ずかしいのでモザイクを…

また、並行してシンボルマークもいくつか作りました。結局、シンボルマークは使わないことにしたので全部ボツになりましたが…。

f:id:sunoho:20200727151204p:plain
最終候補だった3つ

完成

うまく書けたものをベクター化して色を付けてブラウザで表示してみると微妙…みたいなのを繰り返し、ようやく納得いくロゴになりました。難産だったぶん感慨もひとしおです。

愛着を持って使っていきたいですね。

Lenovo M75q-1 Tinyを100均アイテムでちょっと良くする

先日、Lenovo M75q-1 Tiny を買いました。

sunoho.hatenablog.com

このときコストを優先して縦置きスタンドとホコリカバーを削除しましたが、実用を考えるとどちらも欲しいアイテムです。

www.lenovo.com

www.lenovo.com

とはいえ無い袖は振れないので、貧民は貧民らしく 100 円ショップのアイテムでこれらを代替してみました。

バーティカルスタンドを代替する

純正バーティカルスタンドの代替にもっとも適していそうな貧スタンドは IKEA のナプキンホルダー 199 円です。(すのほ調べ)

www.ikea.com

しかしフロニャルドには IKEA がなく、交通費だけで純正品が買えてしまうため今回はパスしました。Tokyo-Bay ってどこ?お台場?

というわけでセリアでキッチンまな板スタンドを買いました。

f:id:sunoho:20200707154127p:plain

貧パソ界隈では古くから mac mini などをスタンダップさせるのに使われている由緒正しいまな板スタンドです。

f:id:sunoho:20200707154133p:plain

うーん、ピッタリ。まるで純正品のような佇まいです。

念のため本体に当たる部分と接地面にビニールテープを巻いて養生しました。100 円クオリティの歪みも吸収できて上質です。

f:id:sunoho:20200707154140p:plain

ダストシールドを代替する

純正ダストシールドはフィルターの付いたフロントパーツを重ねる作りなので 3D プリンタがあれば自作できなくもなさそうですが 3D プリンタ持ってません。

というわけでダイソーでロールタイプレンジフードフィルターを買いました。これをカットしてはめ込みます。

f:id:sunoho:20200707003237p:plain

M75q-1 Tiny には通気孔が 4 面あり、そのうち底面の通気孔にはもともとフィルターが貼られているので残りの 3 面をカバーします。そうです、純正品が存在しない側面と背面もカバーする作戦です。

いろいろ過程はすっ飛ばしますが、頑張りの結果ここに M75q-1 Tiny の通気孔の型紙があります。ところで誕生日プレゼントは前後 182 日受け付けています

f:id:sunoho:20200707011721p:plain

型紙を等倍印刷したらレンジフードフィルターに貼り付け切り抜きます。あまり強く貼ると剥がしたときにレンジフードフィルターがぐちゃぐちゃになってしまうので弱めに貼るとうまく行きます。

f:id:sunoho:20200707003245p:plain

3 つとも切り抜きました。

f:id:sunoho:20200707003255p:plain

これを M75q-1 Tiny にはめ込みます。背面の通気孔はファンを外さなくても隙間から滑り込ませて爪楊枝などで調整すれば納まります。電源ボタンのあたりはもうちょっと削っても良いかも。

f:id:sunoho:20200707003301p:plainf:id:sunoho:20200707003308p:plainf:id:sunoho:20200707003315p:plain

うーん、ピッタリ。まるで純正品のような佇まいです。

ただはめ込んだだけですが、今のところ風で吹き飛ぶこともなく快調です。もし吹き飛ぶようなことがあれば両面テープで固定するか、あるいは本体の外側から貼り付けようと思います。めちゃくちゃダサくなりますが。

今回買ったレンジフードフィルターは 240 cm もあるので毎年 10 cm 使って交換しても 24 年もちます。M75q-1 Tiny を 10 年使うつもりの僕でもさすがに余りそうです。100 均最高~🙌

【おまけ】ツールレス(オープンシャーシ)を代替する

購入時に選択できたツールレス(オープンシャーシ)というオプションはただの手回しインチネジだそうです。名前が大袈裟すぎる。

f:id:sunoho:20200707014042p:plain

さすがのレノボもただの手回しインチネジを単品 1,100 円で売るのは良心が痛むのか別売はされていないようですが、以下のような汎用部品で代替が可能です。

100 円ショップには売っていませんが 1 個あたり 100 円もしないのでパーフェクトを目指すなら買っても良いでしょう。