Framerでポートフォリオを作ってみた

ノーコードツールでサクッとWebサイトを作りたい。Framerで作ってみました。

Index

完成品こちら

Framerにサインアップ
- https://www.framer.com/
テンプレートを選ぶ
- 今回はポートフォリオサイトなので「Simple Potfolio」などで検索
触ってみる→これはFigmaだ！と判明
- Figmaに習熟しているわけではないけど、UIがほぼFigmaだよ
チュートリアルを見る
- こちら👇Webデザイン初心者にもわかりやすかった！
  https://youtu.be/McKxrT01M9g?si=vDQCHZZ6zGDDYF1V
アセットでカラーを変更
- 自分の作りたいサイトのテーマカラーに変更。
- 一気に全ページに適用されるのが楽しい🎉
テンプレのテキストと写真を編集していく
- ここでもデスクトップを編集したらタブレット・スマホにも適用されて嬉しい😭
- いらない部分はHideしたりDeleteしたり。
- レイアウトの変更も右側のLayoutで簡単に編集できる。
Faviconの設定
- 左上のアイコンから「サイト設定(Site Settings)>一般(General)」で設定できた
ドメインの設定
- 左上のアイコンから「サイト設定(Site Settings)>ドメイン(Domeins)」で設定できた

3時間半くらい

無料でも、サブドメインをとれた。詳しくはこちら👇
https://www.framerspace.io/ja/blogs/framer-free-plan-features

1000ページ作れて、月の訪問者が1000名までなら無料でサポートできるそうです。

個人の利用は無料で十分そう！

CMS（Wordpressとか）で作るのより、断然楽。

コードを触るよりも、断然楽。

それに、Wordpressで起こりがちなプラグイン同士の衝突とか、更新忘れてプラグイン故障とか、そういった保守をFramerに丸投げできるのが革命的。

CSSでレイアウトを編集するのも、コードを触るよりFramerのほうが楽だったし、テンプレートから制作したら予めレスポンシブ用にタブレットとスマホはCSSを分けてくれてるのが神だった。

Framer最高！☺︎

普段からFigmaを使っている人や、HTML・CSSわかるよ〜という人には簡単に使えます。

クライアントワークで使うなら、保守料どのみち払うことになるので、Framerに払うという形でお願いします🙏という感じだろうか。

Framerに慣れたらFigmaにも慣れそう、逆も然り。

コードへの理解はあるけどデザインに集中したい一人開発者にはぴったりのツールだと思いました！