まるで黒のM2 MacBook Air! MacBookとiPadをdbrandの黒スキンでデコってみた

2023/01/04 14:08 | IT・ガジェット

いままでApple製品は素のままで使うことが多かったんですが、MacBook Pro 16-inchにカナダのdbrandという会社 の真っ黒スキンをつけてみました。マットな感じでなかなかいい感じでしょ?笑

閉じた状態のMacBook Pro 16インチがdbrandのマットブラックのスキンが貼られた状態で木目の見えるテーブルに置いてある。右上にはNuPhy Air75のカラフルなキーボードが見切れている

実はM2 MacBook Airの黒モデル が発表された時に、「めっちゃかっこいい!」と思って衝動的にAppleオンラインストアで予約までしてたんですが、待っている間に冷静になっちゃって、迷いに迷ってキャンセルして代わりにM1 Pro MacBook Pro 16-inch を買いました。

そんな経緯もあって、あの黒いM2 MacBook Airに憧れて、人生で初めてApple製品にスキンをつけてみました。

閉じた状態のMacBook Pro 16インチ。ほぼ真上の正面手前から撮った写真。Appleロゴ部分には切り抜きが入っているため綺麗に反射している

結果、手垢はあまり目立たないし、スクリーンはでっかいし、ポートはたくさんあるしで、自分にとっては良い選択だったんじゃないかと思っています。めっちゃデカくて持ち運びには向いてませんけど(笑)、逆にこのデカさが魅力でもあるんですよね、16インチは。

スクリーンを開いた状態のMacBook Pro 16インチをAppleロゴの見える方から撮った写真。マットな黒で覆われた表面だが、Appleロゴ部分には切り抜きが入っているため綺麗に反射している

気に入ったのでiPad Proにもスキンを貼ってみた

そして、MBPのスキンがなかなか良かったので、今度はiPadにもマットな黒のスキンをつけてみました。MacBookのは無地のマットブラックでロゴの部分に切り抜きが入ったものですが、iPadでは六角形模様のついたMatrixスキンで、あえてAppleロゴを隠すタイプのものにしてみました。

マットブラックのスキンが貼られたMacBook Pro 16インチの上に、マットブラック(Matrix)のスキンが貼られたiPad Pro 12.9インチが背面を上にして置かれている。iPadにはオレンジと黒のスキンでデコったApple Pencilがくっついている

側面にはボタンやスピーカー穴が切り抜かれたスキンが用意されています。

dbrandのスキンが貼られたiPadのUSB-Cの接続部とスピーカーの穴が見えている側面。スキンはUSB-Cとスピーカーの穴がピッタリサイズで切り抜かれている

iPadはこの圧倒的な薄さが魅力でもあるので、スキンを貼って端末の表面を(それなりに)守りつつ使うのもありかなと思ってます。これならMagic Keyboardの脱着も楽ですし。PITAKA MagEZ Case2 のような極薄ケースも良さそうですけど、片側がプロテクションなしなのが気になるんですよね。

あとは、iPhoneも黒いスキンにすれば全部揃うけど、スマホはポケットに入れて持ち歩くので、傷をつけるのが心配でちゃんとしたケース を使ってます。

剥がす際に接着剤が残らないか心配

ちなみに、dbrandウェブサイトの説明には、スキンを剥がす際には接着剤が全く残らないことを保証すると書いてあるんですが、実際はどうなんでしょうね?数カ月後ならまだしも、2年くらい経っても本当に綺麗に剥がれるのかどうか?実はちょっと疑っていて覚悟はしています。まぁ、最終的には綺麗に拭き取れるんだろうなと楽観視してます。

さいごに

MacBookやiPadにスキンを貼るのは初めてでしたが、なかなか楽しい体験でした。Apple製品は綺麗にデザインされているので、そのまま使うのがいいなんて思ったりしますが、元のデザインがいいだけに、デコって遊んでみるのも楽しいですね。

ということで、今回はMacやiPadのスキンのご紹介でした!
Let’s enjoy Apple life!

picture要素で使うsourceタグにもwidthとheight属性を書くといいらしい

2022/07/18 18:34 | ウェブ制作・運営ノウハウ

突然ですが、picture要素を使ってアスペクト比が違う画像を読み込む場合でも、imgsourcewidthheightを記述すれば、レイアウトシフトが起こらなくなるって知ってました?

<picture>
  <source srcset="img/img-800x480px.jpg" media="(min-width: 820px)" width="800" height="480">
  <img src="img/img-480x480px.jpg" width="480" height="480" alt="画像の説明">
</picture>

実は1年以上前に公開されたChrome 90からサポートされていたそうで(僕はつい先日知りました)、上のコードのようにimgsourceの両方にwidthheightを記述すれば、ブラウザがそれらの値を認識して画像ファイルを読み込む前から適切なスペースを確保してくれるので、レイアウトシフトが起こらなくなります。

ということで、2020年夏にはimg要素について書きましたが、picture要素で複数の異なるアスペクト比の画像を読み込む際は、レイアウトシフトを避けるためにsource要素にもwidthheight属性を記述しておくのが良さそうです。