この文書は、Framerを学ぶ日本国内のユーザーが日本語資料の不足で困難を感じる際に助けとなるよう、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを利用する皆さんに少しでも役立つことを願っています。

インターネット初期の雰囲気が懐かしくなることはありますか？遅いダイヤルアップ接続、アスキー(ASCII)アート、そしてディザリング(dithered)画像といった要素は、今では遠い過去の思い出のように感じられるかもしれませんが、ある人々にとっては依然として特別な意味を持っています。
注意: ダイヤルアップ(Dial-up)は、電話をかける際にハンドルを回したりボタンを押して相手に接続するように、電話線を利用して電話網(PSTN)を通じてデータを送信する通信方式を指します。

Monika Michalczykは、古いインターネットへの愛情をさらに一歩進め、FramerでMacintosh Classicの感性を持つ個人ウェブサイトを制作しました。このブログ記事では、このレトロ風デザインを完成させるまでの過程と使用したツールをご紹介します。

FramerでMacintosh Classicの感性を作る

レトロデザインで欠かせないのがASCIIアートとディザリング効果です。特にAlex Harrisが作ったDitheritという画像ディザリングツールは非常に便利です。このツールを利用すれば、画像を簡単にオールドスクールスタイルに変換できます。このような効果は、デザインにレトロな雰囲気を加え、90年代のインターネット感性を生き生きと呼び覚まします。

注意: Framerのドラッグ効果を使うと、実際のデスクトップコンピューターのようにページ上でアイコンやウィンドウを自由に移動させることができます。メニューで「エフェクト → ドラッグ」に移動し、望むままに設定を調整してみてください。

モバイル機器のためのデザイン

Macintosh Classicの感性のデザインはデスクトップでは素晴らしいですが、小さなモバイル画面では不便かもしれません。しかしFramerのブレークポイント機能を活用すれば、モバイル専用のレイアウトを簡単に作成できます。

デスクトップに最適化されたMacintosh Classicデザインは小さなモバイル画面では不便かもしれません。
ですがFramerではブレークポイント機能を活用してモバイル専用レイアウトを簡単に作成できます。

Framerでコンポーネントを使う

デザインをさらに動的にしたい場合は、Framerのコンポーネント機能を活用してみてください。複数のファイル形式を作成し名前を変更すれば、各要素を個別に更新せずにデザイン全体をすばやく簡単に変更できます。

まとめ

Framerを使えば、単に昔風の雰囲気を真似するだけでなく、実際に使用可能なレトロなウェブサイトを作ることができます。Drag、Breakpoints、Componentsといった機能を適切に組み合わせれば、思い出と実用性を同時に手に入れられます。

皆さんなら、このクラシック・マッキントッシュ感性をどんなページに適用してみたいですか？

本記事はFramer公式ブログの「Recreating the classic Macintosh vibe in Framer」を翻訳・改編したコンテンツです。