はじめに

自分のサイトを公開してみたいけど、プログラミングやサイトに関する知識がない...って方もいるかと思います。今回は、そういった方に向けて、コーディングいらずでサイトを公開できる方法をお伝えしたいと思います。

Figmaのアカウント作成

まずはFigmaというものを使っていきます。Figmaというのは、WebサイトやアプリのUI部分のデザインの際に用いるツールです。図形などを組み合わせて作るGUI形式なので、初心者でも使いやすくなっています。

Figmaを使うために、まず Figmaの公式サイトへとアクセスします。

次に、右上にある「無料で始める」という部分をクリックします。

するとこのような画面が表示されるので、適宜アカウント作成をしてください。Googleアカウントを用いると簡単にアカウント作成ができるのでおすすめです。

こうした画面が出てくれば、ログイン成功です。

プロジェクトを立ち上げる

次に、デザインを作るプロジェクトを立ち上げます。

まず、先ほどの画面の右下にある、「チームを新規作成する」という部分をクリックします。見えない場合は、左側をスクロールすると出てきます。

次にチーム名を入力してください。これは好きに設定して構いません。

「コラボレーターを追加」という画面が出てきますが、招待せずに次に進んでも大丈夫です。

最後にチームプランの選択画面が出てきますが、今回は無料のスターターを選択してください。

そうすると、チームのプロジェクトというのが出てくるので、その中の＋のマークのものをクリックするとプロジェクトが立ち上がります。

Figmaの基本知識

フレーム

基本の枠組みに当たる部分です。デスクトップ、スマートフォン用サイズなど、幅広い枠組みが用意されています。

図形

図のように、長方形や楕円、パソコン内の画像などを配置できます。これを用いてナビゲーションバーや、フッターなどをデザインしていきます。

テキスト

これで文字を入力します。右側のメニューから、テキストの大きさやフォント、太さや色を設定できます。

コンポーネント

複数選択したものを一つにまとめたいときに使う機能です。複数選択した状態で右クリックしたときに出てくる「コンポーネントの作成」で作成できます。これを用いることで、ナビゲーションバーやフッターを一括で変更することができます。コピーをしてコンポーネントが複数ある場合は、すべてに変更が適用されます。

コンポーネントができると、下のように紫色で囲われた状態になります。

以上が、Figmaの主な基本知識です。だいたいこれらが理解できていれば基本的なデザインはできるかと思います。このほかの機能を知りたいという人は適宜検索をお願いします。

Framerについて

まず「Framer」についてまず説明していきます。

Framerは、Figmaと同様にUIをデザインするツールで、無料で使用が可能です。こちらはデザインのほか、サイトの公開も手軽にできる点が特徴です。また、Reactのコードを書いて操作することも可能となっています。ただ、サイトやドキュメントは基本英語なので、少々わかりにくいところがあります。

このFramerは、Figmaにある「プラグイン」という拡張機能を用いることで連携することができます。その前に、Framerのアカウント作成をしていきます。

Framerのアカウント作成

まず初めに、Framerの公式サイトにアクセスし、右上にある「Start for free」をクリックします。

次に、アカウントを作成します。こちらも、Googleと連携してやれば簡単にアカウントができます。各自、画面の手順に従って作成してください。

このような画面が出てきたら作成完了です。ウィンドウ以外の部分をクリックすればチュートリアルをスキップできます。後ほど使うのでそのままにしておいてください。

FigmaからFramerへのインポート方法

今回は、自分があらかじめ作った、架空の企業のコーポレートサイトを例に話していきます。下記のリンクから参照できるので、よかったら実際にやりながら読み進めてみてください。

まず初めに、図のようにフレーム全体を選択した状態で、左上にある図形が四つあるようなアイコンをクリックし、プラグインのタブを選択します。

次に、検索欄から「framer」と入力し、出てきた「Figma to HTML with Framer」をクリックします。

クリックすると、しばらく読み込みがあった後、次のような画面が出てくると思うので、出てきたウィンドウ内にある「Copy to Clipboard」のボタンをクリックします。

すると、下部に「Copied ○○ layers. Paste in Framer」と表示されるので、今度はFramer側の用意をします。

先ほどそのままにしておいたFramerを開き、「Desktop 1200」と書いてある部分をクリックしてフレーム全体を選択し、Ctrl + V でペーストを行います。

しっかりFigmaの内容がペーストできましたね。しかし、これでは縦横がはみ出ている状態になっているので、Framer側で幅と高さを変更します。

同様にフレームを選択し、右側のBreakpoint内にあるWidth(幅)とHeight(高さ)を合わせましょう。今回はWidthを1280, Heightを2879に設定してください。

これで縦横が整った状態になりました。

最後に、作成したWebサイトを公開していきます。

FramerでWebサイトの公開

FramerでWebサイトを公開するのはいたって簡単です。まず、画面右上にある「Publish」をクリックします。

もうこれで公開は完了しました。「This project has~」で示された部分にあるリンクを押せば、公開したサイトをブラウザで見ることができます。あるいは、上部にあるリンクからも飛ぶことができます。

ただ、デフォルトのままだとドメイン名に面白みがありません。ですので、独自のドメイン名を設定しましょう。

公開したときの画面右上にある、「Add Custom Domain」をクリックします。すると、新しいタブが開くので、下にスクロールし、「Custom Domain」内にある「Get a free Framer subdomain」の部分の入力欄からドメイン名を変更します。

入力が終わったら、右にあるチェックボタンを押して反映を完了させます。

今回の記事を書くにあたって制作したサイトはこちらになります。

補足:レスポンシブの設定

この状態でもサイトは閲覧可能ですが、今回設定したのはあくまでパソコン用のページのみなので、スマートフォンには対応していません。そのため、携帯で見るとかなりページが変形することもあります。

今回は詳しく説明しませんが、興味のある方はこちらのサイトを参考にしてみてください。

終わりに

これで、プログラミング知識がない人でも簡単にサイトを公開できます。ですが、ここに載せたことは初歩的なことばかりなので、もっと上のレベルを試してみたい!という方は、Figmaの使い方が載った本などを買うことをお勧めします。

この記事がきっかけで、Web系、特にデザイン面に興味をもっていただけたら幸いです。

参考資料