WEBサイトを作成するとき、みなさんはどのようなツールを使っていますか？

…ワイヤーフレームを組み、デザインを決め、HTMLでコーディングしていく方法が一般的かもしれません。

しかし、最近では「ノーコード」といって、コーディングをせずにWEB上でサイトが作れるツールも浸透してきました。無料で使えるテンプレートの数も多く、「WEBサイトをもちたい」個人が手軽にサイトを持つことも可能になってきたと言えます。

今回は、ノーコードのWEBサイト作成ツールの中でも「STUDIO」に注目して、その特徴を解説していきます！

### STUDIOとは？

STUDIOとはWEBサイト作成ツールです。アカウント取得後は、クラウド上でWEBサイトの作成ができます（ソフトウェアのインストールは不要です）。自宅からでも職場からでもログインして作業できるのが便利です。

#### 他のツールとの違いは？

今や、HTML/CSSといったコードを書かずにWEBサイトを作成するツールは数多くあります。これらは、大きく分類すると「ソフトウェアをインストールする必要がある」「インストール不要」に分けられます。

ソフトウェアをPCにインストールして使うツールは、インストールしたPCでしか使用できませんが、オフラインでも編集作業をすることができます。

これに対して、WEB上で編集するタイプのツールは、どのパソコンからでも（ID、パスワードで）ログインできますが、オンラインでないと編集ができません。また、提供元がサービスを停止したり、アップデートで仕様が大きく変わる可能性も考えておかなければなりません。

#### オンラインでWEB作成ツールの使い分け

WEBサイト作成ツールのうち、ソフトウェアをインストールする必要がないタイプのものは、STUDIO、ペライチ、WIXなどが人気です。それぞれデザインや操作方法に特徴があり、使用者によって好みや使いやすさは異なるでしょう。

このうち、HTML/CSSにまったく触れたことがないという人におすすめなのが、ペライチまたはWIX、そして、コードを書いた経験がある人向けのツールがSTUDIOです。

ペライチでは、用意されたデザインブロックを組み合わせてページを構成していきます（デザインの自由度は低め。自分でデザインを考えるのは苦手な人向けです。）。WIXでは、要素を「ペタペタ貼る」イメージでサイトをデザインしていきます。一方、STUDIOは、マージン、パディング、絶対配置・相対配置…などHTML/CSSの概念に基づいてスタイルの設定をしていきます。

### STUDIOでできること

STUDIOでは、WEBサイトの作成に必要な機能はひととおり揃っております。そして、かなり多くの部分を無料で使用することが可能です。ここで、主な機能をざっと挙げてみます。

#### ドラッグ＆ドロップで要素を追加

STUDIOでは、基本的に要素を**ドラッグ＆ドロップ**で追加していきます。追加した要素は、**Delキー**で簡単に削除することができます。

追加できる要素は、「ボックス」「画像」「テキスト」「アイコン」の他に、googlemapやYoutubeなどもあります。

![](https://lh3.googleusercontent.com/5ysdA__VFmqClo0N7_5feuW3IGTzZawrchJ6iBA9VDG1iQBfwVbjgD8Heb5mdrs8oOJ6Y9e1wLneDBIyurPIann765LJTMHwLzoujZC5D3vDsHMi1498ZKrlanJKcuTNyuagXDKD)

画像やアイコンは、連携サイトから無料素材を取得できます！…素材数も豊富で、かなり便利です。

![](https://lh3.googleusercontent.com/WGVBKw8qQqHdHtV6Vd3Q8JMWwYT1pd-CeieOuFw539BVkOquWfs0zd9wRriFB2-U4xbcz25wn725v27nQqsJp82CN42OrKK4b1Xo6S6P9TfVyX9Tg4S6IustUfEvrfvzAw9aapCg)

また、カバーデザインやギャラリー、ヘッダー等、既にデザインされたブロックも多数用意されており、これらもドラッグ＆ドロップで挿入できます。もちろん、画像は後から自身でアップロードしたものと差し替えることが可能です。

![](https://lh5.googleusercontent.com/7rETgtiqFIbRxpWfrXLuRNT6x4ubS-0dG40gNr5r5IEidvJ-mhndhaPptLkJpsA1GFI--_OgfjGIiF-jwDJtNITXO6lHtShtT3mLp100RplgGi3ajMCydXEY9iORKrTsAXcAxjOg)

#### 要素のスタイルを付加

編集画面上部の「スタイルバー」から、要素のスタイルを設定できます。幅は、px、%、auto、vh…と、柔軟に選べます。

「スタイルバー」には、その名の通り要素のスタイルを設定するための項目が並んでいます。色、枠線、シャドウ等の他、ボックスの配置（重なり合うボックスの上下の位置関係や、スクロールに関わらず位置を固定する設定など）が一通り揃っています。

![](https://lh6.googleusercontent.com/7HqnIXZAAo_jeXipldYbZlI0RdEdb2HX6ezQUVu1m9S8pxRYozOFddgze45iyMz2x40D7dSEpOoBJ8icZ7MuuXDHevlYE_M4iC-V-TcGHxSf3iFH4D2S47WdURL9qK66ScUbYqXs)

なお、マージンやパディングは、スタイルバーの数字を変更することでも変えられますが、ボックスにカーソルを合わせると現れる矢印（⇔）を操作することでも調整できます。

![](https://lh5.googleusercontent.com/KnREq1tO-BbfSGUxErVTgAwHfpGLbTh01u5Xa_9NGNCZn1rUPDbDagjt58Z8Xf1s7ZcLtvK2ZVy9A7W89AdRHLV46IxhLSYZbmoJVuCiW2_RWL7SnQB3gRjXjT8uD5Tuv_2ZNrIJ)

####  要素に「動き」は付けられるのか

現在のバージョンのSTUDIOでは、「スタイルバー」の「モーション」から、要素に動きを付けられます。これでちょっとしたアニメーションも可能です。

もちろん、スライダーなども実装できますよ！

![](https://lh4.googleusercontent.com/OoePY8BpQl07qhQ0oLSTLLFFlAVoaTDK3YpBeSlOEsz7cL5K3ut03fTN4uriKv8QETERklHwamVFFrtBavm-0tVNNF8lPur_Zh7e2748GaShrnVYg0b1i3qufG7zEeb78ZCWvfSM)

#### レスポンシブデザインへの対応

STUDIOは、レスポンシブデザインにも対応しています。デスクトップ、モバイル…それぞれに対してボックスや画像サイズを設定できます。

![](https://lh4.googleusercontent.com/FK3gbtaYrO4d0bVhqfed7GhFvpGx2jkFustvJIv3LZWeytd35yh5IzxHvZGXQIvLuYVCEkH_X-Wcc76ORRm7lsEZrTJqSjAgw8muzzsto9eWtZhcilGfJ6KVNmX7D4jZ-701Z6aI)

#### その他イチオシ機能

◆「ライブプレビュー」機能があります。一度プレビューURLを発行すると、リアルタイムで編集内容が更新されてとても便利です！

◆共同編集モードがあり、複数人でのひとつのWEBサイトを手掛けることが可能です。

◆無料で使えるスタイリッシュなテンプレートが豊富に用意されています！

◆CMS機能も加わり、ブログのように記事を追加していくことができます！

…ここまで、かなりの機能が無料で使用可能です。

### HTML/CSSと比べたSTUDIOのメリット・デメリット

STUDIOを使うと、サイトの作成が圧倒的に早くできます。以下のようなメニューバーを作るのに、STUDIOを使うと10分とかかりません。

![](https://lh4.googleusercontent.com/-eDx9kdYR6K2FXGc60Edl11Q4XyeIcisWbRb1o3SQPADKXYbt_JsvwLtzshR489STKlsUaMCtRIGYkpcZZ6LINr7MGt6_giP8cMVbNVz04VDCTl0fMSUdviat9tMRiTBeq7j7JkU)

しかも、各要素にはdivやnavなどのタグを付けることができるので、SEO対策となる「きれいなコード」を素早く生成できます。

デメリットとしては、無料範囲内で作成したサイトにはSTUDIOの広告が入ります。また、独自ドメインを設定する場合はやはり有料コースへの申込みが必要です。CMSで作成できる記事数も、無料版では制限があります。

とはいえ、自分でサーバーを借りて設定をして…という手間を考えると、STUDIOのサービス内で公開設定まで完結できるメリットは大きいのではないでしょうか。

### 登録方法

こちらのURLから、STUDIOの公式ページに移動できます。

<https://studio.design/ja>

メールアドレスとパスワードを設定するだけで、すぐにアカウントを登録できます。

以上、ノーコードツールSTUDIOについてご紹介しました！

次回は、実際にSTUDIOを操作しながらWEBサイトを作っていきましょう！


STUDIO概要編 〜HTML/CSSを学んだあなたなら驚きの速さでWEBサイトを作れます〜

ここ数年、HTML・CSSをまったく書かずにWBEサイトが作れる、いわゆる「ノーコード」のツールが話題となっています。

本サイトでも、人気のノーコードWEBサイト作成ツール「STUDIO」について、[こちらの記事](https://implist.dev/entries/2485da56d234cd9ab5a30b40cceff6a3)（URL: https://implist.dev/entries/2485da56d234cd9ab5a30b40cceff6a3）で概要をご紹介しました。

今回はそのSTUDIOを使って、ポートフォリオサイトを作ってみたいと思います。ブロックごとのテンプレートを駆使して、ほぼドラッグ＆ドロップだけで作れます。

完成形はこちらのURLから御覧ください！➔URL（https://preview.studio.site/live/1Va6k8GzW7/1）

### 新規プロジェクトの作成

STUDIOにログインすると、自動的に「プロジェクト一覧」のページに移動します。あなたが作成中・公開中のWEBサイト一覧にここからアクセスできます。新しくWEBサイトを作る場合は、右上の「新規作成」をクリックします。

![](https://lh6.googleusercontent.com/3RwuhrMtrOnDJYkv7MQUcTmUwwqZw4e7cipThadGNFfpwtL_FqCN70aCxNz2sTGwSkPGmiLeetKNUY8zVkZotyfTpFzRMB9hB8fBujmzFRJDka8lI5osd2QxOSzd3MNI3GjKOVqO)

ここから、サイト全体のテンプレートやフレームを選ぶこともできますが、今は「空白」（一番最初の選択肢）を選択します。

![](https://lh3.googleusercontent.com/KiYWGgQnKuNiC81R7i0HAV_4ylGJItJbG7HwSDtXUCwL8TeZ5Y6FzLeDe44jdWG3TwacaguseYJYSrD0QqXu5opq7i-RFGHPVSWFkwTr7AMisfKxiwtEXHYDzNNIblhj0lu1aJvn)

クリックで選択すると、プロジェクト名の入力を求められるので、任意の名前（お手本では「implist\_ポートフォリオ」となっています）を付けます。

「空白」を選択すると、エディタ画面に真っ白なキャンバスが現れます。

![](https://lh5.googleusercontent.com/ubwvnO5SkBr2JXJS4gOR6sG6UaRV8V1AjH7iCa92k-q3XhdMrA0R-jrQUyM-zT55e9z0GtaPb0pYBmtmwzZDjTAR9gMm_flEXXM8perzgu-DnALEkip_lEKnyrSqddNM1CXk9803)

### ファーストビューの作成

準備ができたら、こちらのページトップとなる部分を作っていきましょう。

![](https://lh4.googleusercontent.com/1InfWQvKaGXCdHsT1DI-FO1Yu0CfG7Gp2MY3yzmzlDmpS9yPimj_GCn61oplMmGSPHfY1ofZXG6s-sEwZTYtyrxKzZxJ4r07TRjj7OmnRZNcRoo8OsT2iWhL5BGqTpTnR8bnc8NU)

#### ヘッダーの設置

STUDIOエディタの左側にご注目。まず、下図の「①クリックで展開」と示した部分をクリックしてメニューを展開します。次に「追加」タブの「テンプレート」をクリックしてこれを展開します。さらに、その中の「Header」をクリックすると、ヘッダーテンプレートのイメージが表示されます。

なお、選べるヘッダーテンプレートは白系・黒系の２つです。

STUDIOの各テンプレートは豊富とはいえませんが、汎用性が高いので、アレンジすれば様々な場面で使えます。

![](https://lh3.googleusercontent.com/5IOQLD34JmwuwqXhSbRX_s-u82AIM_xl4qaVPITj0zCOwhAUjXM7S-r-E46qumrMG2klgV7_sh1QY9FHDKzVUb_yWC0kUQylhniewhDwqpzQ0FzDDY_B78gLDit_f58D_GWBmrq7)

Headerイメージをクリックで選択すると、選択したヘッダーが自動的に白紙のページに挿入されます。デフォルトの文字をダブルクリックすると、文字の編集ができます。

![](https://lh3.googleusercontent.com/fwYX8rEcfrPJR6eAkuflY8tE89mv4WrS9C_mE-PNMlKot7dYz4BeK2CWfi2KrNLgNXaGEJdTn-SQv0HVCmmSPMhDYuGyrgzWTjrgz3S68G3QkAuckvukSrLJwmAvlzprS3CPDeBs)

※文字を編集するためにダブルクリックすると、その親要素のBOXが選択されることがあります。このときは、さらに同じ場所をダブルクリックしていくと、選択されている個所がどんどん内側の子要素に移っていきます。

#### トップイメージの設置

ヘッダーの設置と同じ要領で、画面左側から「テンプレート」➔「Cover」と順に展開していきます。

![](https://lh5.googleusercontent.com/W5_b0i6S_XhbYqFUPQRBZzfdnJkRSP8ygiYsj3CPgolX8apLXhCdAQYA0Ri6fAI2u6UwfeEC6jWbHZt142v8ZE6L0wYbMJnJpq6qKeViocvn2Dhn-RL3diPsXVgKY-yiBwOJQKeX)

お手本では、こちらのCoverパターンを選択しました。

![](https://lh5.googleusercontent.com/1UtMGfiw5kxhjSgQw0UGM8cWKR9F3wbv4DEgrSQsicpuxNRVoxwQkGBhDR7KSQFtWNQGl3b7RzqY1cJ7RWqG7L4qbZbORaV00FIxwVBo8_s67ubZmNX0lo_6N1JzOypeFtAO4MxK)

Coverが挿入されたら、画像部分をダブルクリックしてみましょう。画面左に様々な写真サンプルが表示されます。

STUDIOでは、提携する素材サイトから、ハイクオリティな画像を無料で入手することができます（種類も豊富で選び放題です）。この中の好きな画像と差し替えることができます。

また、カメラのアイコンが表示されている窓に、検索ワードを入れることで（スクリーンショットでは、”web design” と入力されています）、イメージ画像を絞り込むことができます。

なお、画面左端の「アップロード」を選択すると、自分の手持ちの画像をアップロードしたり、過去にアップロードした画像を選択することができます。

![](https://lh4.googleusercontent.com/q61wezPRr67i3oCO4xNUe8Pvom9YjYNWySOnAm6y1QoFYBWj_HkGdvSZjwl_b9wUiml4SE07ninh96posPlrlldCYNkbVtxvEhfYJ42TH4JVsfAtqYBsQBvgMe6le4JrU7eQNxS5)

### ABOUT項目の編集 

![](https://lh4.googleusercontent.com/SyLop_Ap2kkyNskK--53eaB3CrlY3EeMK66uXnf9qE6VeLXPtM4snujmI0WgRAJQApuUhKi_xGG97CXaxhcomqfvdk0YP6vcZdWx13PT-48GTGtcAlaQ-ghHA_wcsknJy8u9yQ_q)

これまでと同じ要領で、メニューからテンプレートを展開します。今度は「テンプレート」➔「Column Section」を選択します。

アイコンが３つ並ぶブロックを選択し、ドラッグ＆ドロップで、前のブロックの下に配置します。

![](https://lh3.googleusercontent.com/RkB6aWtc2mZuv9pyTSqYqqAG9bgGKA1b9zhLYHjD9IptYHiUlUt3prSursiAvxdHteOB9ZwdApC3CRKRvF9MR0ktPW5WM5SxHYmEfakbj7b4qBcSADCqtOk70RQN5bNOzBElac3r)

※ブロックを挿入しようとすると、オレンジ色のガイド線が現れます。この線の下に次のブロックが配置されます（トップ画像のブロックの下に、ガイド線がきていないときは、選択＆ドラッグした状態でマウスを動かしてみてください。ガイド線が正しい位置に移動したら、ドロップします）。

既に説明したとおり、テンプレートの文字をダブルクリックすることで、文字を編集することができます。

#### アイコンの差し替え

差し替えたいアイコンをダブルクリックします。

※まず選択したアイコンの親要素が選択されますので、続けてダブルクリックします。何度か繰り返すと、徐々に選択されている項目が、内側の子要素に移っていきます。

画像の差し替えのときと同じ要領で、クリックしてアイコンを差し替えることができます。虫眼鏡アイコンの窓から、アイコンを検索することもできます（検索ワード日本語不可）。

![](https://lh3.googleusercontent.com/WzwGy3RMKGHg0U5odldO4091ZLNnPon46AxBLqdycryXIKSsQZtfvC3OoZX8MeMjXfllJfHnUjyWLtetJfHkdAXobPxrW8foECDXyYXZgnsZ2sj8_bXcrqxPB1UXHy9bZTd69h7Y)

これらのアイコンも、提携サイトから無料で入手することができます。

### WORKSの編集

以下のパートを作ります。

![](https://lh4.googleusercontent.com/IH4IYF6MzYfbqPiFOO-euhNE4xUXdiyzLe8Df6uYYGLaI9Nc2D7wO9EVmUBWoANbzPy9CXVQJqaQw7iC6rbmQUKN_5cgJfTnZQtLqS0nutzH9d1iuhoPHOBp7sbjh6ekqODELlmB)

いよいよ制作物の紹介ブロックです。このブロックは、テンプレートの展開➔「テンプレート」➔「Column Section」から見つけることができます。

![](https://lh3.googleusercontent.com/FFwd3bgwdEaCzimn_nxcOJQIMFZK7oSZi-BGjfcPifMKvLTIHez-IL4t9ACNBWubye9n9rtujotL8QSJETKNeFMWljcOscywCIHE8d457CGOc0niOpZm_A7dR_oc_K117qU8A6SN)

テンプレートブロックを挿入したら、余分な文字ブロックは選択➔削除（キーボードからdelete）します。そして、文字の編集を行いましょう。

さらに、画像部分をダブルクリックし、「アップロード」から自分の作品の画像をアップロードし、それを選択して差し替えましょう。（「トップイメージの設定」で説明しています ➔内部リンクできればする）

### ギャラリーの編集

バナーや作品イメージなどの画像を複数置く場合は、「ギャラリー」タイプのブロックがおすすめです。

![](https://lh3.googleusercontent.com/zuYv3o3HUhpQ037V0-7CmH9PjAiCpWDBZu3Fy41OgSNSaq_CcvSSK_QeCu0AhV60ngljtfQtMZdTb8BMin8j5DFBgEDlnEywzFeZ4bwUwWsUvhKQnUNjQIPi3ZoPJJegvEOiypgt)

こちらは、テンプレート展開➔「テンプレート」➔「Gallery」から選択できます。画像配置のパターンは5パターンから選べます。

しかしながら、「Gallery」ブロックのテンプレートには、デフォルトで小タイトルが入っていません。

そこで、前後のブロックのちょうど中間に、小見出しとなる文字を挿入します。

![](https://lh5.googleusercontent.com/sF5NsoHd-Qj1gtg-XmsMapiiTE3yWelzkVyH5ngde5wfaAwaGpAq1Djr3r-P71d6-UNOYV8ue9FYWUTcDDVktTBDh6_r_UOgGTt_7mJRZIlXx0Or59YLyByGIjMDvqBYEo2D-t9T)

画面左の「T」がテキストアイコンです。これを選択肢、ドラッグ＆ドロップします。ドロップする前に、オレンジ色のガイド線が、上下のブロックのちょうど真ん中に来ていることを確認しましょう。

#### 文字のスタイル設定

![](https://lh5.googleusercontent.com/nIrWuNrhLJ01P_VzBr5rc4J1n9PnU0c_jbIPFSn8dW9hThGhZaIrGObfqsp9voVilAFoNc4H5xcDtNPTl2nVJbRRNpf7KAhT8rAkvedWNIVpsrAkdFT8ff8LtLVW0wgZ-coC9P5e)

デフォルトの文字は少し小さいですね。そこで、スタイルを変更して、文字サイズや太さを調整していきましょう。

スタイルを変えたい文字を選択し、画面上部のテキストタブを開きます。すると、文字サイズやフォント、太さなど文字に関するスタイルが設定できるようになっています。

ここでは、フォントを「Roboto」、サイズは36、太さ400として、その他の見出しと揃えておきましょう。

### CONTACTフォームの追加

STUDIOでは、このようなオーソドックスなコンタクトフォームも用意されています。

![](https://lh3.googleusercontent.com/vzDV-Qcv6deSutEUkUtm-qu4Gn9lEEsNXz1m-7mfu4iKPJ2SNKft1Lp4_xfmTbIJ90JTnfr6ceDsN2fbOEmKpy2Mq9OTIRIsRaLOUorpMNkzM4Yvb5GRHnD3fnHmbfCpy9RYGtn-)

ただし、こちらもデフォルトではタイトルがついていないので、先ほどと同じ要領で（「Gallery」のブロック参照）文字ボックスを挿入して、CONTACTと入力しましょう。

では、肝心のフォームの設置です。

![](https://lh5.googleusercontent.com/Q3rmcg2LNo-kSr8npN6NjSJAVUWKnLiZPzfUPBDxDdr1Cgyz8jOEOM1_y8OdGlVavo9G83O1L41DQqPQ8DXMPg3u6NEvXQdNxHeNi7mIVPThH3PT0eIJaXhAjbO05kwBpyfaEPfV)

これまでと同様、画面左端のボタンからメニューを展開し、「追加」タブの「ボックス」から「Form」を選択します。

Formは３種類から選べます（Form１が最もオーソドックスで使いやすいです）。

### フッターの設置

最後にフッターを設置します。もう慣れてきましたか？

メニューを展開し、「テンプレート」➔「Footer」からフッターのテンプレートを呼び出します。フッターは２種類から選べます。

![](https://lh5.googleusercontent.com/8waBd_YePXRbjh_RhXWTx4AT0ZeiJeicLKitO2oFpJ4LDLIlPl0dhvzhexe_TCpN8bL22h1eTaH9zSKvNvc4pfOyzAfJ3gIujGlTQXaeCm-G_FqdGy_CVe8hR1h5GUGw3z84Zf_3)

フッターの文字を編集して、完成です。

各ブロックを他のテンプレートに変えるなどして、自分好みのサイトになるよう、いろいろ試してみてください！

今回で、とりあえずカタチをつくることができました。次回は、各見出しにタグ付けするなどSEOも意識して、STUDIOをより一層使いこなしていきましょう！


完全ノーコードでここまでできる！STUDIOで作るポートフォリオサイト

前回は、ノーコードWEB制作ツール「STUDIO」を用いてポートフォリオサイトを作成しました。前記事では、STUDIOで用意されているテンプレートを組み合わせて、WEBサイトを構成しましたね。

テンプレートのドラッグ＆ドロップだけでも、シンプルなサイトなら作れますが、やはり自分でカスタマイズできないと、なにかと不便です。

そこで本記事では、各ブロックを自分でカスタマイズする方法を学びます。基本的な操作を学びながら、STUDIOの特徴であるボックスモデルに慣れていきましょう！

### ボックスモデルとは？

STUDIOを使いこなすために、まず「ボックスモデル」を理解しましょう。

STUDIOでWEBサイトを作成するときは、要素をペタペタと貼るように配置するのではなく、「親要素」「子要素」からなるボックス単位で各セクションを構成していきます。

（「親要素」「子要素」の例は、下図のsection2をご覧くだい）

![](https://lh5.googleusercontent.com/0ksKgvltRvU1PkRkXsZiIhUkMyPToLk-xCdbrf586-irRAbOxTb2b45hA0zeNLY1XgB0zl3JlJrt_JObW2ka5T4OczMYfo5DtL5nde28Cq18PMIutbAxn7pGIaGU9_AfRbtRCJ5yJKxzECFl1A)

もちろん、工夫次第では、STUDIOでも斬新なデザインを実現することが可能です。ただ、その場合も、基本となる「ボックスモデル」を応用して作成します。

「ボックスモデル」を用いるメリットは、スクリーンサイズが変わってもレイアウトが崩れない「レスポンシブ」対応のデザインをより簡単に実現することができることです。…今は、ピンと来ないかもしれませんが、サイトを作っていくうちに実感できてくるはずですよ！

### STUDIO基本操作① ボックス配置

早速STUDIOにログインして白紙のページをセットしましょう（ログイン➔「新しいプロジェクト」ボタン➔「空白」を選択。前回の記事に写真付きで記載してあります！）。

次に、下記のようにボックスを配置してみましょう。

![](https://lh4.googleusercontent.com/l73LCrks0gAGHK1yIIul7DFuF1zDA_icGYFcN7tJnz8XlkQ2NjSDOtCtPDwRR_o3YZULlYykjdbRCW5aJgoqCq2srVSsi3Y367hhYMjVjk6f1iZ2oBO4smBwLqeX2rvyC2KXvmY2y09x1NuA2A)

ボックスの配置は以下の３ステップで完了です

* **STEP１ 左のメニューからボックス（四角のアイコン）を選択**
* **STEP２ ボックスをドラッグ＆ドロップ**（※オレンジ色の四角は、「ここにボックスを置けますよ」というガイドです。）
* **STEP３ ボックスの大きさを調整する**

配置されたボックスをクリックすると、選択された状態になります。選択されているボックスの**上下左右＆四隅**には白丸が表示されます。この白丸上にカーソルを合わせて、**青矢印**が出たら、拡大したい方向にドラッグします。そうすると、ボックスがその方向に拡大されます。

![](https://lh3.googleusercontent.com/ygk7VF4HyEC2mC5aZQly3uLgwrQdB3SJ1aZV-_LcjVgUqOo7Gb_78CcE7JYvAJr9fK8QLttHmvvBvsg6fdbFxmoIh8khvE_PYT_DmeHFJK2HVkDaEX4Y9mhBoo_mCZHSkaNdsYgKbgXGtuEE9A)

![](https://lh6.googleusercontent.com/rWBBj_E9wTyydIbJtekjBbfF8JQRGAv_gmEVIi-Heru5CDnoAHyCddcpDbqDufm3HrOAgNO3b_6YHO63JqgD5Q08Ed_6CfFdAmdLLkyR3k87kzktgB5_0mLpuYAutOV1vjJbovhyx0jUzenaZQ)

…ここで、STUDIOを使う上で重要な決まりを覚えておきましょう。

ボックスはどこでも好きな場所に配置できるわけではありません。各要素は、親要素の「上・下・左・右・中央」計９箇所のポジションのうちいずれかに配置することになります。※今回は、白紙の背景全体が「親要素」となります。

![](https://lh3.googleusercontent.com/Dc31AoDXFKDnZU9CflPHHQOD57orFwonf1USYyVBLLmIvHdDylqjtCyhqpf8DZwOryR2Ch6eXcIZVsNbqAKl_IRuppqL9T0HxwQq5USrquNedXm0fx13o-1iVPTLuBcI0Fm_K6UxdE58K9zccw)

### ボックスを横並びで配置する

今度は、以下のように「ヘッダー中央に」ボックスを複数個配置してみましょう。（色を付ける作業は後回しにして）、まずボックスを３つ横並びに設置する方法を考えましょう。

![](https://lh3.googleusercontent.com/O2ck3n9mk8JoOM46IyuSM1UQx7bLDfuL_Z6Ot_VeA2-Iizb0R5Iy61WAyLFznXASs89loZ1gA84IIAm9yph0b3A2bT3WrjBFZoIKg7izwYc1ZE1RON8vy1AhAatwQUDQ3ok7O-j_KralVWXmcw)

…さて、ここで、白紙のページそれ自体の「中央」に、ボックスを３つ配置するとどうでしょうか。（ページそれ自体が「親要素」になっている状態です）

要素がこの３つだけであれば、これで問題ありません。しかし、ページ自体の大きさに変更が生じた場合は困ったことになります。もし、ページ自体を拡大すると（図before➔after）、3つのボックスたちも親要素である背景ページの中央に移動してしまいます。

これらの要素を常に「ヘッダー中央」に配置したい場合はどうすればよいでしょうか。

![](https://lh6.googleusercontent.com/O-0LarriYUcO__NsOgYS-2sIJvDg0tBz04A4RU5RW3FTSiVE94KFHrzjG1V6X8Z0OrSwYcfLc9YBim0EN4-cUQpmSLZ5ND3p6FA0nX9qTB3aqulaBGab2ESSWY4sQnFrDnL7aP8H0rpfEqfJvw)

正解は、「親要素になるボックスを設置する」ことです。

まず、ヘッダーとなる領域にひとつのボックスを設置します（この記事の一番最初で練習しましたね）。そして、そのボックスの中央に、さらにボックスを配置していきます。

※なお、ある要素のとなりに次の要素を置こうとする場合、要素をドロップ可能な位置に、オレンジ色のガイドラインが現れます。

![](https://lh5.googleusercontent.com/YqipT5bY-FGDcjxiG68YJ330TH5HDAA42m0fwBv0a6DW6AXZ828oieYc56s41eU5C11SqQSaQMKPsslU5AABkXvCjvAMT1SsAnwJfYHuPBEqcBe-yH4dkJqZPTFK3eCb9za6YwNXQD3eZmIkVA)

これで、背景ページの大きさの変更を行った場合も、３つのボックスは「ヘッダー中央」に配置されるようになりましたね。

なお、背景ページのサイズ変更は、下図の**赤丸で囲ったバー**にカーソルを合わせ、現れた矢印を大きく（小さく）したい方向にドラッグすればOKです。

![](https://lh5.googleusercontent.com/1tHDdQRVoZMImcsUXO9eDbJJilOmlxwwBPBbibfUnYbm6V0ctG8ZhfyI3yJoZjjXoRZrt1gBi8Gv5unTvm0TBKt33WD2R83ptgcdyqcG54yE3vYxeCdl9SR08sXZC2y-B9h1y654uUVD2gIGrQ)

#### ボックスの色＆大きさの変更

STUDIOでの色やサイズの選択については、「STUDIO基礎編④ 要素へのスタイルの追加」で詳しく解説します。ここではざっくりと要点のみ解説します。

* **STEP１ 要素の選択**  
スタイルを変更したい要素（ボックス）をクリックして選択します
* **STEP2 スタイルバーの「塗り」から色を選択**  
画面上部のスタイルバー（タブが「ボックス」になっていることを確認）の「塗り」をクリックします。色選択画面が展開されるので、ここから変更後の色を選択します。

![](https://lh3.googleusercontent.com/daocgZQDsCpqLnSrhOkW8ZotXlLXkDNMnfHthT_C3R952IXtGdot02as7sgWhw5UxnZP1fKbZLdXOHtJnUbgJS90TNrgVcbrehrqHzZAqx4OOtaM6Jd1GA65MnEFvw_CG7InP-DtnEWAtRHbtg)

ボックスの大きさの変更の仕方は２通りあります。

**その１ 図形を直接ドラッグする**  
ボックスを選択し、**上下左右四隅**に現れる**白丸**にカーソルを合わせ、現れる**青矢印**をドラッグすることで、拡大or縮小することができます。

**その２ スタイルバーから変更**  
上の写真のスタイルバーの中に「横幅」「縦幅」という項目があります（現在150pxと表示）。ここに数字を入力することで、選択されているボックスの大きさを変更できます。

### ボックスの配置

先ほどの3つの色付きボックスを配置したとき、まず「親要素」となる大きなボックスを作り、その中に３つの小ボックス（「子要素」）を配置しましたね。

ここでは、ある親要素内にある**子要素の配置**について解説します。

#### 横方向の配置

まず、**親要素**をクリックして選択された状態にしてください。親要素が選択状態になると、中の子要素の配置に関するアイコンが現れます。このうち、親要素上部のアイコン（写真：赤四角）が横方向の配置にを表します。

最初、このアイコンは、「**現在**の子要素の並び方」を示していますが、これにカーソル合わせると他の選択肢が展開されます。

![](https://lh4.googleusercontent.com/rSQmLCyBQOvp4MuG8YAEpJZHJ-ko3au6cXXRG4r1X3YstIEC20sIi45XYIzk8lU-noDeIgk6fOviLYRk2qnjUb9vnu58NMKYvz4I9RrgOBvW6lZSF7HPtpDUDoDtPs9FfHbTTZ72TEcRztj18g)

クリックして、変更後のスタイルを選択します。

![](https://lh3.googleusercontent.com/9CP_F9LL8lvY8UEvQLRKUemsc6Qao8VeVr7mF7kpRwMiu78J74ENBMAXhjyLxgFyHZ6PHnDN6ZL2XWuPXaYCMi3v2S32YBtLrFUq5zhme0T3H1NpnGJGMtbIzh1rmuC9kyaIsVp_6hMu747MrQ)

#### 縦方向の配置

前回と同様に、**親要素**をクリックして選択された状態にしてください。子要素の「縦方向の配置」に関しては、親要素の左サイドに現れるアイコンを使います。

![](https://lh4.googleusercontent.com/sY3NjHbAfXEncGDlcDC4S5kfMFrOuAS_ao29dsOisebc4jut-aSHDr8dfImpu8QrpiypqKl6ICfJDKvZagfMq5CCKC72T2Krqfwktj94VPuiIyVPs0q9vc0p6dkVH8sZhNB1J4tGn0Xh69Kq4w)

クリックして、変更後のスタイルを選択します。

![](https://lh3.googleusercontent.com/Jn2vIU5WeYj57WWC2Z596FF8F5qK8yIh3pHKYTdjS-Z3Cjvz_Gf933gBIqnW7bLzlnXiy0NoUPAv6Sb2oYIjJkquGE8GHPx3ROGMsaOwbvbpRsAlwP0tBS-szWUesGsSBtcgSJ_gH13KQ-zAsQ)

#### 「縦並び」or「横並び」の変更

**親要素**が選択された状態で、右サイドに現れるアイコンから、子要素の「縦並び」or「横並び」の設定をすることができます。

![](https://lh6.googleusercontent.com/LLJUSm76lpXJUO0ah5RPnkqLOsuMUJTR3vBOu2rlRMdWZVhDNu7u2MKLi5iApZsvrYCy9Evn4OggBAP0ku9RlmRT5LtozRdtqnfWHfVUo437085dxDBAICeht0t6C1mbnjZPGZQ7XIyfFVYHAg)

![](https://lh5.googleusercontent.com/4iYdl6VZFMWoRVIGVGnGNYNrg0RwKr0gfg0yIXGwtuNWI9c6PP1Z-3fFABdoqmiBA3EDY_xtv51SNOXCLI14x40nErraZlNYa2WzFJzKaote4K1Wu8rvvIYmoBAjbgQEzB2n-U0ZHOlKDKCtvw)

なお、ボックスを縦並びにした場合も、同様にボックスの間隔（上下寄せ、均等割…etc）や開始位置（右揃え・左揃え…）などを設定できます。

![](https://lh4.googleusercontent.com/D8BtCC3xzxPsuXYQodPFMIKGbEVtHLHVQURrUTrEMs-qIVMQDrQ0WgukIrLjXxJbkrGBnfoy61n-Rn0R7L945ia0PRMK6R8Vj39qR60ZGFnW1INEGhAPa1W4EZ3wEpSb_r0HiKgkE_WLg8s6Iw)

ここで、もうひとつポイントです！「ジグザグの矢印」を使って、親要素からはみ出した子要素の配置を決めることができます。

例えば、先ほどの「赤・黄・青」のボックスが３セットあったときのことを考えてみましょう。通常の横並びでは、親要素に入りきらなかったぶんは画面から切れてしまいます。

しかし、ジグザグ矢印の設定にしておくと、**「折り返し表示」**になります。

![](https://lh4.googleusercontent.com/EPvuFqguzDUYpnPBwv-NHagOxjk0h0S7cjwqBePdR-33VhObjnZoDWI1_joQWtmQEEf8Z_Zq6JcuQcoFw6fWJJ_CHRG23AfbBX3-Dp67SIN8-K_cEQxvPPO-BNmRdBxXxZvnjpB8bdNOFi54Pg)

### さいごに

STUDIOでは、ボックス単位でレイアウトを組んでいく（親要素となるボックスの中に子要素を組み込んでいく）「ボックスレイアウト」でWEBサイトを構成していきます。

各セクションの「親要素」であるボックスのサイズを変更すると、中の「子要素」のサイズ・間隔もそれに合わせて変更されます。

このように「ボックスレイアウト」を意識してサイトを構成することで、レスポンシブなデザインの実現がぐっとしやすくなり、また、異なる大きさのディスプレイで表示したときのレイアウトの崩れを防ぎやすくなります。

![](https://lh3.googleusercontent.com/8eElabhSzyT33m5GEAkMbOnGpTF2Qlo7fv_Z7rz8vxPOanqMz6GUh8mLxDg4zEbiPmUmRQVybzCuFsjhT4tv6NQLrwUrkIyslgD0vQPu64jE2jH5WG25BokEoNNF2t7Jgun3MXOVUyX9aImqJQ)

デザインを見て、親要素・子要素の関係を見極めれば、STUDIOを使って手早くWEBサイトを作成することができるようになります。慣れれば、上記のレイアウトなら５分くらいで作れるようになります。

一緒に練習していきましょう！


STUDIO基本操作①　ボックスモデルを制す者はSTUDIOを制す！？

本記事では、STUDIOを用いてWEBサイトを作成するにあたって欠かせない**画像の組み込みとその配置**を学びます。

画像を配置する際も、前回学習した「ボックスモデル」の考え方がとても重要になります。画像を思い通りに配置できるよう、**STUDIOのルール（操作方法）**をしっかり覚えて、使いこなせるようになりましょう！

### トップ画像の配置

まずは、どのWEBサイトにも必須となる**トップ画像**を配置してみましょう。

![](https://lh5.googleusercontent.com/o4949TjhqzjSX0JokJmSvl2nkMp7UQeZGaCmokjipT_KRqRMsFs-HexTs-4VQnuWRKgVg68qhivpTDz4MxD4MlUOwVD8WOAhX81gh9XS-QnSlwAkOclY-gSulIZGhg3gfnm_8rpt5WwUmwkShw)

準備：STUDIOにログインし、「新しいプロジェクト」から「空白」を選択し、白紙のページを用意してください（詳しくは、[**完全ノーコードでここまでできる！STUDIOで作るポートフォリオサイト**](https://implist.dev/entries/e3d8b5449404c6034a0d292d21e2d7a9)をご参照ください）。

白紙のページが準備できたら、以下の手順で**画像ボックス（このボックス内に、あとで選択した画像が入ります）**を選択・配置し、サイズを調整してみましょう。

**・STEP１ 左のメニューから画像のアイコンを選択**  
**・STEP２ 画像ボックスをドラッグ＆ドロップ**  
※オレンジ色の四角は、「ここにボックスを置けますよ」というガイドです。  
**・STEP３ 画像ボックスの大きさを調整する**

配置された画像ボックスをクリックすると、選択された状態になります。選択されているボックスの**上下左右＆四隅**には白丸が表示されますので、この白丸上にカーソルを合わせて**青矢印**が出たら、拡大したい方向にドラッグします。すると、ドラッグされた方向ボックスが拡大されます。

今回は、トップ画像を配置したいので、画像ボックスを横幅いっぱいに広げましょう。

![](https://lh6.googleusercontent.com/QFHXHAPFhxNpBQu17tMkkL7cU-slpTXwVlNp0U6XOVOe9rCrS0Hr6RIU80MeMTcVeYBBc0vMz2Dcd4UKSpV48qPMuvTt21V9lGtWdXrcL5IkHxWu18LNtqU8mFJwnOo1R8PPQ1IiEYj8x7Sx2g)

画像ボックスのサイズ変更は、矢印をドラッグする方法の他に、**「スタイルバー」**からも行うことができます。

サイズ変更したい画像ボックスを選択し、画面上部の「ボックス」タブを開いてください。この「縦幅」「横幅」の数字を変更することで、ボックスのサイズを指定できます。

※単位の表記をクリックすると、他の単位の選択肢（px,、%、 vh…など）が現れます。

![](https://lh5.googleusercontent.com/sy9iiPHmN6ZpaMX6SuUsBuO6Pw0sQMZaxfoYJivYSV2yX-Aqk1zQhSdpGi7CngIxy4UCERg46xYSNu_HlkdRzKIcg74TNik9akKq-f50uq44UtXqhHnOJ6eGSx0j8IzImfPEcSBEXb_hmpXzQQ)

では、いよいよ**画像の挿入**です。

ページ内に配置した画像ボックスをクリックし**選択された状態**にすると、左上に**画像アイコン**が現れます。これをクリックすると、画像メニューが展開されます。

メニュー内の画像をクリックすると、その画像がボックス内に挿入されます。画像を変更したいときも、同様の操作（画像ボックスの選択➔画像アイコンをクリック➔メニューから新たな画像を選択）で行うことができます。

![](https://lh3.googleusercontent.com/Hrx50bjmtRRKNHlUddHtcAUW20HMarbRxX5oHvOtaabL1QGmqI_4PXVqOvCwYnH2v46IP3uEwl--ayPr_5CZ4czpLEVRSJYXQxOc0yzXlIJk475phchX_BDjfDO1tfG0BQp9zlQ6h7OkELjWZQ)

画像メニューに展開される画像郡は、STUDIOが提携している素材サイトのもので、無料で使うことができます（どの画像もクオリティが高いので重宝します）！

なお、これらの画像は商用利用も可能です。

#### 画像の検索

ここでは、作成するサイトに合った画像を検索する方法をご紹介します。

画像ボックスを配置し、左上の画像アイコンを選択して、画像メニューを展開してください。画像メニューの上部に**検索窓**がありますね。ここにイメージに合うワードを入れて、**Enterキー**を押すと、画像の検索ができます。

![](https://lh6.googleusercontent.com/x-qLyk2PCWY31SmgFE-UzHcLcHcf1MOvmSLIN4V9oiD2dKLAq-zzJ6go1vnc0GdXgZpkMOuAyXNaUsql3ot4M9TZ6E3BRWUXdH0vCdOM0SSoQ6egQx2VOxQtSu8mtCoekfvPBKn9hfLf7PAHvw)

STUDIOは海外発のサイトですが、画像検索は日本語にも対応しています。ただし、同じ意味でも（例えば「花」と「flower」）、日本語と英語では検索結果がやや異なります。イメージに合った画像が見つからないときは、英語でも検索してみることをおすすめします。

#### アップロードした画像を使用する方法

続いて、自分のPC内の画像をアップロードして掲載する方法をご紹介します。

まずは、これまでと同様に画像ボックスを配置し、左上の**画像アイコン**をクリックして画像メニューを展開します。この状態で、最も左寄りのバーをご覧ください。**「画像」と「アップロード」**、２つのタブがありますね。

「画像」タブが選択されているときは、先にご紹介したとおり、提携サイトから画像を選ぶモードになっています。ここで「アップロードタブ」を選択すると、自分のPCフォルダから画像をアップロードするモードに切り替わります。

![](https://lh3.googleusercontent.com/y7QN3GMuZ6s5vaAHRizEy3WTnrYOSSJ-Ofxtht95gSx6f7dFDq4jrHuzaqC6k8NAjIPC7v_S_YTXbwoKXldiK-k1bo0bwEUYayfZYi62E38Yfp64BVm24UifdgosGeeehgGssRyaVLMIkinZYA)

「アップロード」タブを選択すると、隣にさらに「アップロード」と表示された窓が現れます。ここをクリックすると、自分のPCのフォルダ（例：「ダウンロード」フォルダなど）が開きます（必要に応じて、挿入したい画像が入っているフォルダに移動してください）。

画像を選択すると、その画像がSTUDIO内にアップロードされます。アップロードされた画像をクリックして選択することで、設置した画像ボックス内に、画像を挿入することができます。※今回は、別サイトからダウンロードした無料素材を使用しています。

![](https://lh6.googleusercontent.com/H47UIFc209Ub_kBC06S5om2IDR7orVy_i06WWDP1-QcL7BI9EI595um8OGXqDp6ieEgJTya6V7dlRtdEZZgvPPQTQYSUSvtk2DDJ7QcVhsaDmTgJkpPKyj4LhVy9WS-TXUK4HV4c7fOJXr4qxg)

### 複数の画像ボックスの配置

STUDIOの「画像ボックス」は、前記事で扱った「（通常）ボックス」と同じルールで配置することができます。

つまり、各要素は、親要素の「上・下・左・右・中央」計９箇所のポジションのうちいずれかに配置することになります。※親ボックスを設置しない場合は、白紙の背景全体が「親要素」となります。

※「親要素」・「子要素」とは、要素の包含関係を表します。ボックスAの中にボックスBが入っている場合、Aが親要素でBが子要素となります。

![](https://lh6.googleusercontent.com/1QtFdyCV5klEFfdJ88lTOiE2u8SbFnl822nL-QqB3nD_qGVbnfWSYm0uQb0TC4D580wcJn9bopcMwDdEwz3hsplo_9b6rGBhvUiDKfye0fD3Be2XyQlwVlz5O6pTcovNo2vfR_ZaWYsZ0EcGlw)

通常の「ボックス」を親要素として、その子要素として「画像ボックス」を入れると、親要素に対する子要素の配置（右寄せ、左寄せ、中央寄せ、均等割…など）を選択できます。もちろん、横並びのみならず縦並びにすることもできます。

![](https://lh6.googleusercontent.com/BamW_ZCIifCqsrywKEDKqYBajPb2RMVLrwuspqwPVnw4GL8Sl_WZ7bu01fp4eNNpmw7g-5coqkY7UUHOhoVgugYit9EK5Xdqa6hWms0hxNEP_atBxKRwOGj8rxkCLnGClKp90b34NNPqvGwHoA)

これらの配置は「[STUDIO基本操作① ボックスモデルを制するものはSTUDIOを制す!?](https://implist.dev/entries/e3d8b5449404c6034a0d292d21e2d7a9)」で詳しく解説しています。

### 「Box」モードと「Image」モードの違いについて

**画像ボックス**を配置すると、下図のように「Box」または「Image」という選択肢が表示されます。これらの違いは何でしょうか？

![](https://lh3.googleusercontent.com/FkrbHCS_fafNdMM1H3j58JQm7tON90DrqKl6y4ZsFG26IkGhmxYT3uioO9zUTEmBZIeRbY0L8A2p_vuPIypZv07DV1kWGUiZVnffCzZNldGhgHeY8l-mq0PrDjZm-V-pOSLS-lImuNm6o1Vdsw)

簡単に説明すると、「Box」・「Image」の設定は、**画像の縦横比**を**任意とするか、元画像の比とするか**を決定します。

「Box」に設定すると、画像ボックスは文字通り「ボックス」として扱われます。つまり、作成者が設定したサイズのボックス内に、画像が設置されます。縦長の画像を、横長に表示することもできるわけです。

画像のどの部分を表示させるかの設定は、次章でご説明します。デフォルトでは、元画像の中央部分を中心に表示されます。

![](https://lh3.googleusercontent.com/qnMOf0BW_V_xVzYUaB5ZpkzVasdfT1f81H3yloTk-vctItTFM6BfJMGmW1W8-T5MvtO5NfARMUFYEo3AS_aoKSRXe1uhcA6loGLPBPocENH6p654788jW_mINCZaTT6RJqba4p7vZnR1sSbwnQ)

一方、画像ボックスを「Image」に設定すると、**元の画像の縦横比を保ったまま**拡大・縮小されます。

![](https://lh6.googleusercontent.com/AIeGakntEvgSB1af8jo9PNCY1WSvL3oq1BCCSBmEGtWaDvSLE9O91UWp_XJIbc2A5iiEimiwIl4CXasZ1J4atzGhccrJ94GhFk2RhqOuv-L0euwEyxlnlPeu8naYrtINtqK3s6oL-W8kmeUeyw)

「Image」モードでは、スタイルバー（画面上部）の「縦幅」は自動的に**auto**で固定され、数値を入力することができなくなります。横幅のサイズ変更に合わせて、自動的に元の比率に合った縦幅が適用されるのです。

![](https://lh4.googleusercontent.com/8Wn8MEA50QM0Vpm-o-sfUCGhuCI5WUNWtNGROpAj22ba8IIMi-GdZQU4l7Fer4MHAMXylQMk6y_0u1i1FmCkkkCqCGRumYD2x5vkwMHoPw36TgoAT2ZQdN7GSb213IZ4P57Z0rtpw8gbfSz40g)

また、「Box」モードでは、スタイルバーの画像タブから画像の明るさやコントラストなどを変更することができます。しかし、「Image」モードでは、このような画像の編集を行うことができません（画像タブ自体が表示されません）。

![](https://lh6.googleusercontent.com/fI-x80Rc-L2ZBizH6D9Y8lADvKaEjOD17AaNsgaUJAIusCP1IWGaVmWE61T6r0uSem7jLYn7roBD0T7wPaiEkDAEpmIT1Ykt6j9lPnz8TcfL3-bU0-kqXz54UWajHLZOgiyiNeLmqY1XVt5eLw)

### 画像の編集

前章でも触れましたが、画像ボックスを「Box」モードにしておくと画像の編集をすることができます。

画像の編集（エフェクト）に関しては、「明るさ」「コントラスト」「鮮やかさ」「モノクロ」「セピア」「ぼかし」が設定できます。その他、画像の表示に関して「配置」「リピート」「cover/contain」が設定できます。

では、以下の画像に対して、よく使うエフェクトをいくつかピックアップしてご紹介したいと思います。

![](https://lh4.googleusercontent.com/L5qoP3L2PPgdqcHalLRTNGQzEWolLLruQvNjiBZuk_sV9x-TjxiziUbPZwufqbeqazyqD2SwR7HWy9U3iANx-GMOgS9cQUpzcG1YcO94SSOtwnCJR03oKG0Hc3fBTAaNM3VBis4mk8liTbo8-Q)

#### 画像の明るさの編集

明るさは、「1〜0」の間で編集できます。「1」は元の明るさで、「0」は真っ暗です。画像上に白抜きの文字を入れたいときなどは、0.4〜0.5にするとよいでしょう。

![](https://lh3.googleusercontent.com/r8e79nQUjcmT7mKsCmXvE7VvzyRUlwL7dBK-HkhH71o73R4Tqzp9FzOQN6unC6Cu64Jq4F3qypTDeixDf8Y4Pzo1CAHwiuD4121sPMC62WD-veHvRbVgerMij5vfr894kJdl2TAiTgxl9Bmmkw)

####  画像のモノクロ度合いの編集

画像のモノクロの度合いも「0〜1」の間で編集できます。「1」は元の色彩で、「0」でモノクロとなります。

![](https://lh6.googleusercontent.com/ZwICXTnv2ZnKfQZ8KYfFD7Lfs54yw4GPCSYnrC-OKFXc9RpHsC-vL6zflq2KV87sv4eUMmfqWCIvd-7i-R-iqFmRKGiqlvhDGHX-WPzN6XogciJoARRny115aN0GuKspqgUWkNXMcTntI2Kqeg)

#### 画像のぼかし度合いの編集

画像のぼかし度合いは「0〜20」の間で編集できます。数値を大きくするほど「ぼかし」の度合いが大きくなります。

![](https://lh3.googleusercontent.com/XGJMO45axPumMb3Qev872-oiwkOJALYRElKjSuTNIpEzQ9bde3ntLkt9En-Goo1glrCO7pRfa5hYtp7L8Tw9UxgtOCAYI8K5yOwnvmFFpCH6w-hne5SVfv-ybehNCkG6V5U9WNMaVQhD1AuO7Q)

#### 画像の「リピート」と「cover/contain」

「リピート」と「cover/contain」は、セットで覚えましょう。

**「contain」**は、画像ボックスの中に画像をすっぽり収める（contain=含む）設定です。この状態で、画像を「リピート」させると画像が繰り返し表示されます。一方、画像を「リピートさせない」設定にすると、アイコンイメージの通り、1枚の画像のみがボックスに収まった状態で表示されます。

![](https://lh4.googleusercontent.com/3b1ZVzrmRBvpWrgA_3h9xwxbfTEEHqAjLcdGS79dzHldiXC_0tbMzcEI0nIAiPrJoE5YpUDMzA1WYR7SNv-jFTdhEDDnHANTToPxcT_Y0iAdXeVxMwmYH10r9TR3w7VsFjHi_adKB-LI3-NF1g)

**「cover」**を選ぶと、画像ボックスが画像でカバー（画像でいっぱいに）されます。つまり、下図のような表示になります(デフォルトでは、「cover」になっています)。すでに、画像ボックスがいっぱいの状態なので、「リピート」に設定しても表示は変わりません。

![](https://lh6.googleusercontent.com/PRoKAQpzMl7XrKd6Ph98iYn3_9PE31388t9y3TeNoQyzvasn7xnDsVoFfD9EJDNG_2ipFcX_4hG4rQ9K-yK_XtlOH6LUoxkOd-OAjGb7C46Zr56yYntYsJ7yF9-7Vb9OCbEtLwQkBoTbBku6iA)

#### 画像の「配置」

任意の縦横幅に設定された「画像ボックス」に画像を挿入すると、通常、画像は**元画像の中央から自動でトリミング**された状態で表示されます。

しかし、スタイルバーの「配置」から**画像のどの部分を基準に表示させたいか**を設定すると、画像の表示箇所を変更することができます。ただし、この設定は、画像表示の**基準点**を設定するのみで、細かい位置設定（あと5px上に移動など）はできません。

下記の例では、元画像の右端を中心に表示するよう設定しています。

![](https://lh5.googleusercontent.com/2GiMchFymxc9yIkHxZHKJavz8RO4AKMlt6kYpbdAcZ_KMtW9cSx5mB1nFg_2EsYjhHksE9LN3NTN3QdvMzQZGqHhfV_dh4rXF1NUG7hrWsna3dBdI9Qt_zdtVCR7WvJfuJlvA6-hvB3a0fu7pw)

#### その他の画像サイズ設定

実は、画像のサイズ設定には、「cover/contain」の他に「px」または「%」で設定することもできます。これは、**画像ボックス内**において、画像を何%または幅何pxで表示するかという設定形式です。

![](https://lh3.googleusercontent.com/ys8xWIP_5E2uWWXKnFuV5elopC2Oe_d9aDuJYB_iZ59Qo_1XprwClM59I7smPW_noLm1qZFMCCtEnkxlKBSba_boqJLQZdsizKMMeW60AiwOFpMGr24t_NUyC18G0Mn8QXLKIMfAetaIfIxp6g)

画像を100%以上にすると、画像が拡大された状態で表示されます。画像ボックスからはみ出た部分は非表示になり、**画像ボックス内にある部分**のみが表示されます。

いかがでしたか？細かい設定はできなくとも、かなり自由度の高い編集ができるかと思います。画像へのエフェクトも、是非いろいろ試してみてください！


STUDIO基本操作②　画像の設定と編集をマスターしよう！

STUDIOでの画像の配置は、いったん覚えてしまえば使いやすく便利ですが、操作ルールがわからないとストレスですよね…。

そこで、本記事ではSTUDIOの便利な画像操作を５つ厳選してご紹介します。

1. STUDIOでの画像の重ね方
2. STUDIO で画像の上にテキストを配置する方法
3. STUDIOで 画像のスライド（カルーセル）を入れる方法
4. STUDIOでの画像のトリミング方法
5. STUDIOで画像を切り替え方法

### STUDIOでの画像の重ね方

WEBサイト内では、下記の例のように、画像の一部が重なったデザインをわりとよく見かけると思います。本記事では、まずSTUDIOで画像の一部を重ねるにはどのような操作をすればよいか、解説していきます。

![](https://lh4.googleusercontent.com/tCm6KPz94gTX11WvEU0jbnDEnQ20XU0eTBZtmsbuBIWhVidLK0PHvQHKCRcNyaArHV59ukLSVqWLVdcqpV8Bzc56_PG93ONafp3S2idPxFzWVsey9ccjdmdvjPdpkhYlPPBM-MvdiOP7SvEWJA)

まず、親要素となるボックス①と、画像②および画像③を配置します。（親要素には、わかりやすくするために、あえて色をつけておきます）。

![](https://lh3.googleusercontent.com/rRh5V2U8EFMKPEwDVmlZuMxXob7b44vwFBIp6lJHo-Ei2Fja4dVB5m92j6u7uuZ36EzSweEJT9M7YovfsLHHs_LHf-ePAmxxfsp3qPLCQcWL34cbtRzIGCikYOAfoecaWIMvB6nMMwL3UAUvVw)

次に、画像②を選択し、マージンをつけます（100pxくらいでよいでしょう）。

もし、この時点で操作に不安がある場合は、前記事**「**[**STUDIO基本操作② 画像の設定と編集をマスターしよう！**](https://implist.dev/entries/6a2007be3c1757bc7e1a6456373df5af)**」**をご参照ください。

![](https://lh4.googleusercontent.com/94NJB_bFtYMe6p06CF5PjrtpOKFlEuiAo1FS-PhLj7ll4oqA24Q1fAbM5n-jYYQDqL0arbyMHsWkyuWXkxG4XHRnqUQN9N1KBqCwIVIKkQrS5CGsOD4gVXrKMHPxL4u0Z8AtdSiBapReJ9CrvA)

画像③を選択し、先ほどと同じように、上側にマージンをつけます。そして、向かって左側（画像が重なっている部分）には、**「マイナス マージン」**をつけます。

通常のマージンは、要素と要素の間に余白をあける働きをします。これに**「マイナス」**をつけることで、その逆の意味の、要素の**「重なり」**を表現することができるのです。

![](https://lh6.googleusercontent.com/HGw0kwRsTc1r3w2HqHV9YPrssR2098JccDyWtsmk796YkTEErMToExTY_HN6ogR-VBiahmAdoUSZ3tG6-6bUF0DEdq3_cbd7X2ldvuOYVl1rC8X2-Ve_0OCwLQ9Ppyvp3zi1FuDkJplk3gRCag)

最後に、親要素の色を「透明」に設定して完成です！

#### 実践編 〜STUDIO で画像＆ボックスを重ねる〜

今ご紹介した「マイナス マージン」を使うと、WEBサイトによくある、以下のようなデザインも簡単にできます!

![](https://lh4.googleusercontent.com/QTsWmdUBEJcNhV2MCSCaPMWOlML92jRtRPbcKOYUXGYWD2l9dfrwoJusovUH-oeg5ddWguaP7QtOn8vaudsNQ0MsZ0CgiQ-Zcm8tGEcACK3oG-YtaGSDY9EYv24FXdXfO6cbV2aUzf7ogB1rgQ)

通常通り、画像①、ボックス②を縦並びに配置し、ボックス②の中央にボックス③を入れます。このボックス③の上側にマイナスマージンを設定すればよいのです。

ボックス③の上部にタイトルとなる文字を入れて完成です。

![](https://lh6.googleusercontent.com/UtB0xivL_dFtUqcP3RHBueahp6lWFkY_v268989GzKCbkTchkvnaE1eIkd7Vx9iRPmi677uSSUc20FRlwlnLqJoJAbV01xRqL9jlrhSAYJgZI_zAcz1Q_NcSPm4e8dKLFGf6a9ZXK4bGQET__A)

### STUDIO で画像の上にテキストを配置する方法

画像やボックスの上にテキストを配置するのは簡単です。画像の上に、文字ボックス（画面左サイドの ”T” のアイコン）をドラッグ＆ドロップするだけでOKです。

![](https://lh6.googleusercontent.com/-IwllVQEexjyYUu0d3N_sK1l-CgwrPYDLM_w58ZWk-kp5zUGaaJkibfzaLYkpUX-QQ1vVsq43O9XlO2cWYy8GHsG-FwrTM_BRJEqSdDb-_kstwQKbfdMKOG7RPmy1gLVspzZADT30UHvD3qiLQ)

しかし、STUSIOユーザーから「画像の上に文字を乗せることができなくて困った」という声をしばしば耳にします。

…そんなときは、画像が「Box」モードではなく「Img（=Image)」モードになっていないかチェックしてみてください！「Img」モードの画像の上に文字を入れることはできない仕様になっています。

画像の各モード（「Box」or「Img」）の違いが気になる方は、前記事**「**[**STUDIO基本操作② 画像の設定と編集をマスターしよう！**](https://implist.dev/entries/6a2007be3c1757bc7e1a6456373df5af)**」**ご参照ください。

### STUDIOで 画像のスライド（カルーセル）を入れる方法

WEBサイトのトップに複数の画像をスライドショーで入れられたら素敵ですよね。STUDIOでも、こういった「カルーセル」の機能を使うことができます。

![](https://lh5.googleusercontent.com/Dx5AC9UYQlehhTJ1E_ZReeFr8D6PmcJcIHp1hNlAppWnSWQ7dcfMDEX5qqZ-aXWEvg_J-lLNFXJ4POOo41Gfp85keAqinxEewcj50QnjOXglniJ7en1YT6qfoLelCaFh2ESxiy4tlwDrAuiydg)

では、さっそくカルーセルの設定方法を見ていきましょう。

まず、画面左のアイコンから、メニューを展開します。「追加」タブから、「ボックス」を選びスクロールしていくと、一番下の「Component Parts」の中に「Carusel」があります。

これをドラッグ＆ドロップで、制作中のページの希望する場所に配置します。上にお示ししましたのは、このようにカルーセルを挿入した場合のデフォルトの状態です。

![](https://lh6.googleusercontent.com/wlvTNbN0ivFge1O24bN81l8eDvMqOUYcRBJGmuayG655SmBY7zo_ihgBTnxi2yzzgxI6_sG0MH9UfiufyBHEPKUBMNBHkR0JompYp0G06bht6lMoS00uuhoeylweOadvH8N1PWV1svUDFvB9mg)

続いて、カルーセルの内容をカスタマイズしていきましょう。**カルーセルが選択されている状態**で画面右の設定メニューを展開します（メニューを展開してから、カルーセルを選択してもOKです）。

※カルーセルの設定メニューは、各画像ごとの**「リスト」**になっています。このリストメニューが現れない場合は、しっかりと**カルーセルが選択されているかどうか**をご確認ください。カルーセルを選択したあとでも、他の場所をクリックしてしまうと、その場所（他のボックスやページ全体）の設定メニューに切り替わってしまいます。

![](https://lh3.googleusercontent.com/kQmMdOOyCqWkcJst4oIARmkxV5VcbRF12DJv4SFdeibRFzlzHxPIGWIIXbNXaL2F7RbPO6GMMnB4MGeQPCIBGPnkuiSsYu3Cti7rt9QWB2R88bzKw6TXpdWbmemBTIA0ov8dyANPnXEay1_MrA)

カルーセルに表示する内容は、順番に「１、 ２、 ３…」と番号が振られており、この順に表示されます。

リストは、各画像ごとに「title（タイトル）」「cover（画像）」「discription（コメント）」「publishedAt（日付）」がデフォルトで設定されています（横スクロールで次の項目が現れます）。これらの分類は、変更することも、追加・削除することもできます。

また、表示する文字は、通常の文字ボックスと同様に、ドラッグ＆ドロップやマージンの設定で位置を変更することもできます。

画像を変更したい場合は、設定メニューの「cover（画像）」の画像アイコンをクリックしましょう。通常画像の変更と同じように画像選択（or アップロード）画面が現れます。

![](https://lh4.googleusercontent.com/0oOA8gxq3ZbUU-21AtBVuccpg-KHvxHGTrcH-CluYjKuRQ5FhgtFOkK4r1TBRB12gc4avTUAiF84vawGc-fqTDBi4kitHr4BfdK4vXu7ANTFH3eEGwAuEHfvMGdFiQb_XU4IP2gGKsiKOl2kJw)

残念ながら、STUDIOのカルーセルは画像が自動的に移り変わる機能がなく、ページを訪れたユーザーが自分で両端のアイコンをクリックしなければなりません。

この他、CMS機能を使っている場合、CMSに付随する機能を使ってカルーセルを設定することができます。ですが、これは本来、CMSにある記事内容を画像＆コメントのスライドショー形式で紹介するものですので、今回は割愛します。

### STUDIOでの画像のトリミング方法

縦長/横長の画像の一部を表示させたい…そんなときはどうすればよいでしょうか？

前記事**「**[**STUDIO基本操作② 画像の設定と編集をマスターしよう！**](https://implist.dev/entries/6a2007be3c1757bc7e1a6456373df5af)**」**でご紹介した通り、画像は（「Img」でなく「Box」にしておく）「画像タブ」➔「配置」から、画像のどの部分を基準に表示するかを大雑把に決めることができます。

![](https://lh6.googleusercontent.com/wS7MKFM06XRqEs4_S1endpEZh9Pd-asN_tqW-YOJvK_2j16FUdLG3w-wMehF1-9zqtNzlRCaXSUJRM7u568j_CpB_LyWVCj0LxLPoxnbGWqddQDNUxHyuWAXREHaiVAtveDH0i8-xQawz_1SqQ)

しかし、上記の方法よりもうちょっと細かく設定したいものですよね。そんなときは「マイナス マージン」と「はみだし」設定をうまく使っていきましょう。

まず、親要素となるボックス（このボックスの範囲に画像を収めます）を用意し、その中に画像を入れます。そして、画像にマイナスマージンを設定してみましょう（今回は、上側に-100pxを設定しています）。画像がはみ出しましたね。

![](https://lh4.googleusercontent.com/6cpvDNQs1Dg0blp5czDWGz0OacZnDR8r9I05PMJouyn4Pe0yxNs3r93wK0y5GKdSGeabb1xL-p5Vge-eokwP-6OAlU6gy9sKiElCLYOTd-NZVDYucKET2o631pgqiFIqNHvesV42rc8TRPLEjQ)

次は、**親要素であるボックスを選択**した状態で、スタイルバーの**「はみ出し」**から**「切り取り」**を選択します。すると、画像がボックスからはみ出た部分がカットされました。

これを上下左右うまく用いることで、画像をトリミングすることができます。トリミング完了後、背景のボックスを透明にしておけば、サイズ変更された画像のみが表示されている状態にできます。

![](https://lh3.googleusercontent.com/5gsP5ECYppuizZt6J90x1k5bzlef_J-0YuDsD_9aKpSOHXXMD6ZAIHpBd-cl9M09ygLOea-PiOvKCVpBWeOHJ3T_CKSyIHn56SQFOVCVOTxpdVux5NRV3F3d_QF9zE8P-rxywBDvcUajZllqcg)

### STUDIOで画像を切り替え方法

STUDIOでは、カーソルが「ホバーしているときのスタイル」を設定することができます。例えば、ボタンにカーソルを合わせると（ホバー中）ボタンを押しているような動作に見せることができます。

（※今回、画像はこちらで用意したものをアップロードしております。）

ただし、「クリックしたときのスタイル」はなく、設定できるのは「ホバーしているとき」のスタイルであることに注意してデザインしましょう。

![](https://lh6.googleusercontent.com/xEfPWqVt4bK5_U_9sMeoDIiZc4ICGdplZMC-o7N57TzIa7rZXxN7N4gLEbYWMxt4C11PibVv0G7n7fcMjJTnhCwr5kqy9lfykSS6ttV2HCfWeGOOco0PdLKbNmy1pFHggyfVMyFRLEvDFmEq1w)

まず、ホバーしているときに現れる画像を配置します（今回であれば、「ありがとうございます！」と書かれたボタンです）。

そして、この画像の上に、ちょうどぴったり重なるように、ホバー時以外の画像を乗せます（今回は「ここをクリック」と書かれたボタンです）。

![](https://lh4.googleusercontent.com/SeKVoKLh_mGccdZV-fyZhraM8ntmkZiJhAaZ--JbIGrxcx4wCwvcCgKnJHdL1wXAnlDP5bmAZk1xgVBww7sDSeMooc4ZURTJKU7gIzNKoB9l0l2z-rL7XHmuclxNb4zLvbFFO8NDvx0843q7fA)

次に、ホバー時に消える方の画像（今回は、「ここをクリック」と書かれたボタンです）を選択して、画面左の設定から**「条件付きスタイル」➔「ホバー」**を選びます。そして、**透明度を「１（デフォルト）➔０」**に設定します。

※透明度は「１」のとき透過なし、「０」で完全に透明になる設定です。

こうすると、ホバーするとボタンが押されたような動きをつくることができます。ただし、画像が切り替わる速度など、細かい設定はできないので注意しましょう。

プレビューはこちら（[https://preview.studio.site/live/nBW2k56yOv/1）](https://preview.studio.site/live/nBW2k56yOv/1%EF%BC%89)

いかがでしたか？ノーコードでは、できるデザインに制限もありますが、工夫次第でかなり「動き」をつけられることが実感できたかとおもいます。アニメーション編と合わせると、もっと自由度の高いスタイリッシュなデザインも可能になりますよ！


STUDIOの便利な画像操作5本ノック！

STUDIO操作の基本として**文字装飾**はマスターしておきたいところです。これまで学習した、**ボックスモデル**、**画像操作**に加えてこの**文字装飾**ができるようになれば、STUDIOの基本はほぼOKといってよいでしょう。

文字の色・大きさ・シャドウといった「スタイル設定」、文章としてのレイアウトである「段組み」、そしてリンク・アニメーションなど「動き」をつける方法を学びます。

ここまで学べば、シンプルなWEBサイトであれば、十分に機能するものが作れますよ！

**本記事で学ぶ内容**  
**１、STUDIO 文字の装飾方法**  
**２、STUDIO 文字のフォントを変える方法**  
**３、STUDIO 文章の配置（右寄せ・左寄せ…）と文字組み（縦書き・横書き）の指定方法**  
**４、STUDIO 文字にリンクを付ける方法**  
**５、STUDO 文字にアニメーションをつける方法**

### STUDIO 文字の装飾方法（大きさ・色・シャドウ）

では、まず画面左の「T」アイコンからドラッグ＆ドロップでテキストボックスを挿入します。このように**テキストを選択した状態**にすると、スタイルバー（画面上部）に「テキスト」というタブが現れます。

このスタイルバーの「テキスト」タブから**「文字間」「行間」「サイズ」「フォント」「太さ」「イタリック（斜体）」「下線」「色」「シャドウ」**が設定できます。

![](https://lh5.googleusercontent.com/rSV1jBvsODkSk0g9sFq0nWvR5lDcSorVfRdWOdtJiXqsDRmCi_JHtbWkl6uw6ch1ylioGw1yjFrdP3wApSMNH_qcgNEnwmNLS5q5x4iWUXVw_DH10DghNtn0ZrMglIHoKpWQd34x6pztE_A66w)

本章では、WEBサイトを作成する上で必ず必要になる「文字サイズの調整」「文字色の変更」「文字にシャドウをつける」方法をピックアップしてご紹介します。

#### STUDIO 文字サイズの調整

スタイルバーの**「サイズ」**にカーソルを合わせると、文字サイズの選択肢が現れます。選択肢は10から288ポイントですが、288ポイントより大きな数字も、直接数字を打ち込むことで適用することができます。なお、10.5などの小数点のあるサイズは表せません。

![](https://lh6.googleusercontent.com/AybsMX_8SPzGqlTuImEQzOp7tkOjvJUmqryzBQAKykLcqFlizWzZJZNP0gJFiJeHP2v8PUbHOnwH1o3qO9murVjfVp1lXzgeRrtRGXc3VcsJU7Iu79Af8FLxQE6DWiW14fA5iGg1EyQRss_ZTg)

#### STUDIO 文字色の調整

スタイルバーの左はしの方に、**「色」**と書かれた項目がありますね。これをクリックすると、下図のようなメニューが展開されます。

![](https://lh3.googleusercontent.com/zYYTPzXTPgeeLBkciR5WOCsl2GY_RjFL7-DICqxp4-JYDkRpPkFaFtKAIEXw25foicDBvlvoPf-uhlJi7pjcD4LIdExtj4njCrHQI55jfvi8bNv3oYSWJWtpkc2Z4F7CT76TsScK3a_Ij351qw)

メニューは５つの項目で構成されています。順に見ていきましょう。

（図中）①は、色を登録する機能です。よく使う色を登録しておくことで、都度カラーコードを入力せずに、色を呼び出すことができます。「＋」をクリックすると、今表示されているカラーコードの色が登録されます。

②はカラーコードです。16進数モードとRGBモードを切り替えることができます。ここに直接、英数文字を入力して色を指定することもできます。

③は透明度の設定です。向かって一番左が透明度0.0（完全に透明）、一番右が透明度1.0（完全に不透明）になります。現在は、「完全に不透明」に設定されています。このバーの中の白丸を動かすことで設定できます。

④で「色相」、つまり赤、緑、黄色、ピンク…などの色を決めます。

⑤のパネルで、先ほど決めた色に対し、「彩度（鮮やかさ）」「明度（明るさ）」を決めます。⑤のパネルを見た時、上下方向が明度（下にいくほど暗くなる）、左右が彩度（右に行くほど鮮やか）です。ここで選択されている色は③のカラーコードに自動で反映されます。

#### STUDIO 文字にシャドウをつける

「色」の隣の項目に「シャドウ」があります。これをクリックすると、同じようにメニューが展開されます。

メニュー内にはいくつかデフォルトで、よくあるシャドウのパターンが登録されています。ご自分で「X」「Y」「Blur（ぼかし）」を調整して、影の位置やぼかし度を調整することもできます。

また、colorから、シャドウ部分の色を選択できます。

![](https://lh5.googleusercontent.com/2I79V_d29Ppx8kMM19GBo5E60o2sIXcThOXTU4Fn9jXWOBnC41cw61kRZyNgJP109dqS2EFE_Lw0laF_J7-Ej7UDtx8sn3T-AnqxPbloVvnjKJm8pPGPFxgrxtMLyMdlZjZmjZb8c2IcNW63Fw)

### STUDIO 文字のフォントを変える方法

フォントを変えたい文字を選択し、スタイルバーの「フォント」にカーソルを合わせましょう。デフォルトの選択肢が現れます。最初は選択肢が少ないです…が、ここでがっかりしてはいけません!!

「＋」をクリックしてみましょう。

![](https://lh4.googleusercontent.com/GMM7TlP83hWykcB95MbTQQ_P2nRUN_3VtFNf5ooFxR41tGbGReVpCSGiLQIzrmCBthe_WZkWe5BJ5MyCKaikuI3DugxmCrkIwzWy79v2OtJCdTO25g18m7J-hx4Exf2w0iTQncXwUTITUZ5tTw)

画面右側に、フォントメニューが展開されます。ここから、なんと「Google Fonts」「TypeSquare」にアクセスし、フォントを適用できるのです！

![](https://lh6.googleusercontent.com/HrSuEe55nu0oNd2GSjLDM4wqmTAkwfWllYXDdRtPOxT6BGbIINa3pnEh8SvErVLr4lOI8A8tI0VaHsqvbc1m71hm_p0Kw34Mgo5-hbWiQySqM6n0Nm94gz4hXLOrjxGwBik8nBGdrgUNIGqmPQ)

好みのフォントが見つからない場合は、検索窓かキーワードを入れて検索することもできます。また、アイコンからは「明朝体」「ゴシック体」「筆記体」または「手書き風文字」など別に検索することができます。

「styles」をクリックすると、そのフォントが対応しているスタイル（ふと文字、イタリックなど）を展開し、選択できるようになります。

![](https://lh5.googleusercontent.com/R4nfLJqB8eOSBnpoVUHKcoPCUHT5nZYc9AGCNWNPaUJrj-1lwH4aQQoSDAgYCIbUFgDzyaRqjRrScEPZXjOYHxWVWhu8pHFdm5yKcupmUvOJcYidqnMsyVQH3JipDBu5EgIYCZYstWY8XRmlnA)

### STUDIO 文章の配置・文字組を変更する方法

STUDIOで文章を入力したときに、（Wordファイルの文章ように）**「右揃え」「左揃え」「中央寄せ」**などを変更するにはどうすればよいでしょうか。

そんなときは、配置を変えたいテキストのエリアをクリックして「選択された状態」にし、画面上部スタイルバーの**「テキスト」タブ**から変更を行えます。

![](https://lh4.googleusercontent.com/O8-eQwSCVbAL0IVIWcFLKKl1gCf86t-PPlgZ4ANb1dtl-sR5bGq1v8bPCwihshX-0d4MtC3L2em4pNnHjVbEkoiJPC3gghG5QjG1_uFB2cM3MitCI-vACW3pANsDBMduVAnWJcBgOy3EFCNLmQ)

「両端揃え」にすると、テキストボックスの幅いっぱいに文章が広がります。ちょっと余白がほしいときは、「テキスト」タブから**「ボックス」タブ**に切り替えてパディングをつけるなどして、うまく調整してみてください！

![](https://lh4.googleusercontent.com/bFrpYnx0ihjpUNKziFUB3h6dR66bbc-oD6v3Ugb5lbNFeO_LeKSliKABk3B4ZHGKdvX00MWHN8i0PWtGV4yzJ4zF_KZOQCl7s53O1NgMPrJ2rQUXhzBeWP4cgs7FjyeqDJQQCJm_0zxpqBWanA)

さらに、**「縦書き」「横書き」**といった**「文字組み」**を変更したいときは、先ほどの「配置」のとなりのアイコンから指定することができます。

![](https://lh6.googleusercontent.com/yP8jxyPddS7ezzW1ibSYnY0Z-do33SaLDkUTJQEp3jI1imZhdO68qqKb9-o1O0feTMfg0-OjiAYIuvkaK5eqqKxoVAHDjQKIdxoa8HfJdRTrJaZOxH3KGx2ModMzCXl62LcHel6wCKgOgLe6WQ)

### STUDIO 文字にリンクを付ける方法

この章では、STUDIOを使ったWEBサイトで、ページ内リンクおよび外部サイトリンクをつける方法をご紹介します。

#### STUDIO 内部リンクを設定する

例として、以下のようなWEBサイトを想定します。

まず、リンクから、同じページの別の場所に移動する方法をご説明します。「お問い合わせはこちら」という文字をクリックすると、同ページ下部の「お問い合わせブロック」に飛ぶよう設定してみます。

![](https://lh6.googleusercontent.com/o1TlWxjwdMnxxnXhOCot9PZoiCKF7eDnTsTqlf0FmenttXp6Hpy70woKMpi4EVDr92xFFc1ueem1YE7gjRyX0GInGVCkFRlBZeoP8trkplK5GzvfJGgYpmFaU8CQRRQ2c3O_Y6TDVZFC0K9ZEg)

**STEP1** リンク先（今回は黄色で示した「お問い合わせブロック」）にIDをつけます。

今回は２ブロック先のエリアにある「お問い合わせ」という文字にID名（今回は#contantとしています）をつけました。

![](https://lh3.googleusercontent.com/xpJWdYHCERpMs1aY8MSdeHLRqKV9Tw0hVTkIBC2fAiPGpO-tRbMgypJdtBHjk0yPlFtMicyg-LqPTRxXI8hbNCdhgPZQegfE3axGyXPBMVp7OWV5oGOwqxPznTuXENWc07FH1mWHY_RyMcKFaw)

**STEP 2** リンクをつけたい文字（今回は最初のセクションの「お問い合わせはこちら」）にリンクを付けます。

画面右のメニューから「リンク」➔「ページ」を選択します。そして「ページを検索」という窓内をクリックすると、ページ内の各要素のIDが選択肢として現れます。リンクさせたい先（今回はSTEP1で設定した #contact）を選んでクリックしましょう。

ページが複数ある場合、サイト内の他のページをリンク先として設定することもできます。

![](https://lh5.googleusercontent.com/79hOrFwTyY9RCUipm1qbZctjXZksG__oML-m93nnodgIDqYK6C2gOubLXEqmRY79J797r6DDlUKtDjFzZDJo84Qrrzi4efspYR-APF8RXr5CvyT3W3mhqITDkf46807qO8m6Za-PpsMpsUyKFw)

これで、内部リンクが設定できました。しっかりリンクが機能しているかどうか不安な時は、ライブプレビューから確認してみましょう。

#### STUDIO 外部サイトのリンクを設定する

外部サイトのURLをリンク先として設定するには、どうすればよいでしょうか。

先ほどと同じように、「お問い合わせはこちら」を選択した状態で、画面右のメニューを展開し、「リンク」の項目を設定します。今回は、「ページ」ではなく**「URL」**を選択してください。

ここに、リンク先のURLをコピペしましょう。

リンクが機能しているか、プレビューで確かめたら、完了です！

![](https://lh6.googleusercontent.com/P-1NWStlIM5Whv26P-CTDc_iERSkoXOdKU2Q8plwJpdaTUewi3g_k9J3uWlTSmBxYT34lCPJNk6eYVETtKf0S0YnFzH7KaV-ctGijOQL8YUWiLnlNIE6Vyde6eG8VS9y8dIpOEoxSVgmBgCDLg)

### STUDO 文字にアニメーションをつける方法

STUDIOのアニメーションは、設定次第でかなり複雑なものを作ることもできますが、今回はシンプルに、**マウスをホバーすると文字が大きくなる**パターンを解説します。

![](https://lh4.googleusercontent.com/2W2V2BKPaVnihy0Q7tGQSCEH2jypZV2GvXD46vvoi8KcvTxnfh7CNVgLJOsncGv6nEKe1dqgOLnkcxuP2Xv6Cv75OGgZLhc12FKtsOlr29-RBOeOaPm117amGPuskNgVc3vdqrUJENPjPA73Gw)

まず、アニメーションをつけたい文字をクリックして選択された状態にし、スタイルバーの**「モーション」タブ**を開きます。

![](https://lh6.googleusercontent.com/CyEJl3SUg0gsSiQjXTEuvibs8BeYRcKUkISnRi4JoR4hAWZ0R4qPbgP2yViQnUHlivRZ6wSY9BiBbUq3RrH4vo93d5A7Vf5pojpYlZkTIAvkV26062J2Ovu7EgzjiYNj9kGjRt85I99xTnUV3Q)

画面右端の**「条件付きスタイル」**から**「ホバー」**を選択します。**「ホバー」**が選択された状態で、**「モーション」**を設定すると、**ホバーしている間はこの動きをしますよ**という設定ができるのです。

なお、「出現時」を選ぶと、そのページ（またはセクション）を開いたタイミングでアニメーションが開始します。

次に、選択した文字にどんな動きをつけたいかを設定します。

![](https://lh3.googleusercontent.com/l3ghAYtU8ACYGTYuwN3rrDfC2VHODBpvQBLOPLw0WVYJJ11vILMNb2kEJib3LzCJZD1eJ0AYC0tmpV8XULWjYMc6bI9x0whbl3JFOqYlHoXRzkzlstT7wxXU7p4qfkm6eaUsZHTqEGueQa8dOQ)

「イージング」「時間」「遅延」は、**アニメーションが進行する時間や速度**に関する設定です。そして、「移動」「回転」「スケール」「傾き」は、**要素がどんな動きをするか**を設定するものです。

今回は、**ホバー中は文字を大きくする**という設定にしたいので、**「条件付きスタイル」**が**「ホバー」**になっている状態で、スケールを**X（横）、Y（縦）ともに２（２倍）**と入力します。

そして、**「時間」で動作開始から終了までの（時間的な）長さ**、**「遅延」でアニメーション開始までの遅れ時間**、**「イージング」で動作速度のパターン**を設定します。

「イージング」はなかなかイメージが難しいので、ご自身で設定を変えて色々と試してみるのがおすすめです。

「イージング」について、今回の「文字が大きくなる」という動作を例にもう少し説明を加えます。イージングは、設定時間内での要素の動き（今回は「拡大」という動き）について、「等速で要素が拡大する」か、「最初じわじわ動いた後、急にバンっと大きくなる」または「バンっと大きくなってから、ゆっくりと最終的な大きさに落ち着く」などといった速度の緩急に関するパターンを指定していると理解しましょう。

いかがでしたか？

文字の装飾、動きをマスターすることで、「基礎編」から一歩進んだ、オリジナリティあるWEBサイトが作れるようになったかと思います。

機能をどんどん活用して、思い通りのデザインをSTUDIOで実現しましょう！


STUDIOの文字装飾テクニック５本ノック！

STUDIOは「ノーコード」のWebサイト制作ツールですが、**タグの設定によるサイトの構造化**を行うことで、よりSEOに強いサイトを作ることができます。

HTMLを書いたことがある方はイメージができるかと思いますが、**ヘッダー・フッター・大見出し・小見出し・パラグラフ（文章）**…等々、各要素がそのWebサイトおいて果たしている役割を「タグ」で表し、**検索エンジンにとってわかりやすいサイト**にしておくことは重要です。

このように**役割をタグで表現していくこと**は、セマンティクスHTMLと呼ばれています。  
詳細はこちらごご参照ください➔[Semantics（セマンティクス）-MDN](https://developer.mozilla.org/ja/docs/Glossary/Semantics#html%5F%E3%81%A7%E3%81%AE%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9)。

STUDIOではタグを指定することで、文字を見出しや本文として設定することや、ボックス全体をヘッダーやフッターとして設定することができるのです。

![](https://lh3.googleusercontent.com/zkd75AQdpgbfRctBYnnfP4Bwl-2n5PWkatbWa4nFqGHR29xli1Cwhu5yuYjDg-Rx4Ej17by6RR3cl1vMQZYTFExMblH0f0bcjNKSECBXidBGLitioePv96UaPqcAkfEQ3NMsToKuy7BXjkgGgQfWQm0)

また、**サイトタイトル**や**ディスクリプション**の設定など、基本的なSEO対策もできますので、公開前にひと手間かけて上位表示をねらいましょう！

* **STUDIO SEO対策その① 最適なタグを設定しよう**
* **STUDIO SEO対策その② レイヤー構造を整理しよう**
* **STUDIO SEO対策その③ タイトル＆ディスクリプションを設定しよう**
* **STUDIO SEO対策その④ 404ページを設定しよう**

### STUDIO SEO対策その① 最適なタグを設定しよう

「タグ」とは、HTMLを書くときに指定する**h1（大見出し）、h2（中見出し）、p（パラグラフ）**などのことです。「この部分は見出しですよ」などと検索エンジンのコンピューターに教える役割があります。

**ONE POINT ➔➔ 基本的なSEO対策として、「見出し」にはそのサイトのキーワード（「この単語で検索したときに上位表示されたい！」というワード）を含めましょう！**

また、文章（または文章＋画像）の**「かたまり」**を**header（ヘッダー）やfooter（フッター）、section（セクション）**などとするタグ付けもします。

では、それらをSTUDIOではどのように設定していくのか見ていきましょう！

#### 文字をタグ付けする

まずは、ご自身のサイトについて、**「大・中・小見出し」と「本文」の関係をしっかりと構成しておきましょう**。

例として、以下のWebサイトの文字についてタグ付けを行っていきます（※本記事の説明用に作成した架空のWebサイトです）。

![](https://lh6.googleusercontent.com/q5YiSRkLh_VTNDO_hkhLs3IE9UiXoRi7EAYjZsPHlPw_QZChrwppMbTkQLC9gNQ6cXT5Kg7XthY5FSpiFI6M4aoemP7P8iZZYA28hunZ4o5hILxECW6aaZouLvVHDGHIOHFPmMHVbMjkkvOkPAg1cpg)

まずは大見出しの「インテリア百科」という文字を選択した状態で、**画面右のメニュー**を開きます。さらに**「タグ」の項目**を展開すると、文字要素に適用できるタグが選択肢として現れます。

デフォルトでは「p（パラグラフ）」が選択された状態になっているので、**「h1（大見出し）」**をクリックしてこれに変更しましょう。

なお、「h1（大見出し）」はサイトにつき、原則１回だけ使用します。

![](https://lh5.googleusercontent.com/IxPavBD8IsimTKaf51wqPuruY_zp7havoAtRBKEhAgIOMMC5P1XEyCgcfFVBesgzJL2AxC6DgtK41gmG1jlHfAIoIPEd7G5v8eSh-NlIkdcjKy0bdpBp5Y52bVmCol7k84IMPMZMvMsF3GjdDlbf30k)

続いて「中見出し１」を選択し、同様にメニューを展開して、**「h2（中見出し）」**に設定しましょう。「h2」は、各セクション冒頭のタイトルなどに使うとよいでしょう。

次に、３つある「小見出し」のそれぞれに対し、上記と同様の操作で**「h3（小見出し）」**を設定します。

**見出しに相当するタグは「h1」〜「h6」**まであり、**数字が小さいほど重要度の高い見出し**となります。

通常の文章（今回の例では「テキストテキスト…」の部分）は、**「p（パラグラフ）」**を選択しておきましょう。

#### ボックスをタグ付けする

ここでは、各セクションの親要素となっているボックスに対してタグ付けを行っていきます。

まず、ヘッダー部分のボックスを選択して画面右のメニューを開きます。「タグ」項目を展開すると、文字のときとは異なる選択肢が現れます。これらは、ボックスに対して設定することができるタグです。

ボックスに対するタグは、デフォルトでは「div（※）」となっております。今回は、**「header（ヘッダー）」**をクリックしてこれに変更します。

※divはディブと読みます。dividedが由来で「分割された」という意味です。divタグに強い意味はなく、**単なるグループ**として扱いたい時に指定します。

![](https://lh3.googleusercontent.com/XrjChb45WdwgUPcSHad9HJELnn2KoL_rFL4rLdr3pLHCasuy6IerVulb3g8xdcqYTJHUoMFAxZ6FwHao1zsJLpjg8U1S1LCxTGezHCwa8o81nthLQJoW4LvL6cvtH0ToGZQ86qp3f_bVd7yzxqdSsaY)

次は、その下のセクションです。（元の画像ではこのセクションの背景色が透明でわかりづらいので、このセクションの親要素のボックスに黄色く色をつけました。）この背景部分をクリックして選択し、画面右のメニューを開きます。

今度は、選択肢から**「section（セクション）」**を選択します。

![](https://lh5.googleusercontent.com/91u62VlFpy0ejWEZPr5kTUnm_2GmppHrVvCvqhX74rDdZdfN7EeINw9LqUUFNPMo4CfK5hzudT5iPWi2UvoVD3yy4BCrjF5OYi_sTFcVbRZK-N8OO4LksB-VhXFwxc03UBzFLSgU382anC5PK_2fIEc)

通常、このようなセクションはいくつかあるので、トピック毎に**「section（セクション）」タグ**で区切ります。

また、今回の例には載せませんでしたが、多くのWebサイトには最下部にサイトマップや連絡先を記した「フッター」が設置されています。フッターがある場合は、そのボックスに**「footer（フッター）」タグ**を設定しましょう。

###  STUDIO SEO対策その② レイヤー構造を整理しよう

STUDIOでは、「ボックスモデル）」を意識してサイトを構成すると、自動的にHTMLのようなレイヤー構造が生成されます。

※「ボックスモデル」がピンとこない方は、以下をご参照ください。「[STUDIO基本操作① ボックスモデルを制すものはSTUDIOを制す！？](https://implist.dev/entries/e3d8b5449404c6034a0d292d21e2d7a9)」

では、さっそく例を見てみましょう！

画面左のメニューを展開し**「レイヤー」のタブ**を開くか、メニュー下の**「レイヤーへのショートカットアイコン」**をクリックすると、レイヤーメニューが開きます。

![](https://lh6.googleusercontent.com/MUclLJjtd_V6FPftEPni5FM14veDRBCpCbjM9TRTzvQ_A7Jy72ADg3jzV8SjfYXDHacYC5bkppfVwNmuaENo9cRYAEwG_l0k4XTo3Am9Rk4-5mc6qA-6Su1_hXaIg5tOm261kM3WYm0Zc-J-6eFd8Oo)

最初は各セクションの親要素のみが表示され、子要素は折りたたまれています。子要素も表示させたい時は、要素名の左のマークをクリックしましょう。

下記の例では、**「header（ヘッダー）」の中に「h1（大見出し）」**が、その下の**「section（セクション）」の中に「h2（中見出し）」や「div（ボックス）」**が含まれている様子がわかります。

![](https://lh3.googleusercontent.com/-dQIe3qshfE9ovuw5DQqh1WY175feegHBTa3fiJAEqIu5TqUpDFISOh4364k5dzQmur1tqOH2yiRfzTCZfomaZq01AZDWZhV1iGi58lu5UO_BsBOagErzhNQTjWmZNnU9sdx1H6Ezb9iqYg8SI7bXgs)

なお、**後から付け足した要素を既存の要素の中に子要素として入れたい場合**は、レイヤーパネル上で、移動させたいレイヤー（<div>や<h3>などの文字）を移動後の場所に**ドラッグ＆ドロップ**することで、レイヤー構造を整理することができます。

HTMLになじみのない方も、STUDIO上でボックスレイアウトをきちんと意識してサイトを作れば、この階層構造は自動的に生成されるので、特に悩まなくて大丈夫です！

ONE POINT➔➔レイヤータブを開いた状態で画面右のメニューを開くと、選択したレイヤーに対してタグなどの条件を設定することができます。

![](https://lh4.googleusercontent.com/bNS_xTOxiDiN_XcoP2SsOssRzF7O1bi8kyur_u9xghp614ys44p55UWUokiSMT55ZRmN9Ge91iouCNKsy-aMYhoYzjIP27hFUjkvlr1FE8qXa_CdHJYxTTKTXo0fDPH-X4OH8rxrhWjAJQTuubtbR8U)

階層が深い場所にある文字などは、誤ってその親要素を選択してしまうことが多いので、こんなときにもレイヤーパネルを活用できるのです！

### STUDIO SEO対策その③ タイトル＆ディスクリプションを設定しよう

Webサイトが完成したら、公開前に必ず設定すべきことがあります。それが、**「タイトル」と「ディスクリプション」**です。これらは、Googleなどの検索エンジンで検索したときに「検索結果」として表示されるものです。

![](https://lh3.googleusercontent.com/loPqBbnsSaJa3dAhwUX-hS4HUlsxSIUwWMwEDrJ1_cUTxMc-q3w7AgFZHUVZagoNOJ7P22fdM5y-ZksiaiPWVfuotL7o9Iy-7blRrUfx9eNyEfa7KrZoscn9zNHJxNYJTm-6CVNqj_Z1beUMZrs66nw)

ONE POINT ➔➔ SEO対策の基本として、**本文の内容と「タイトル」および「ディスクリプション」は必ず一致させましょう**。いくら人目を引くタイトルをつけても、本文との関連性が薄く「ユーザビリティが低い」と判断されると、検索順位が下がってしまうでしょう。

では、さっそく**STUDIOでの「タイトル」と「ディスクリプション」の設定**の仕方をご紹介します。

**エディタ画面の右上に「ページ設定」**という項目があります。これをクリックすると、画面右側にページ設定に関するメニューが開きます。

![](https://lh6.googleusercontent.com/tY8Dk-QTxFvnvqvHToxrAVZCDw0UoQf3vA0EyA41H9vCJhho6qhwhcQj4xwxDbD04AHFCOV-DMMgO5KE20XVaUmrNtgACOd7ey2lOTEgNOvhb9bzgfKQIyqP1fp4-SnLxxazLy19kqki2o-Q7CjHT2Q)

この「ページ設定」メニューをよく見ると、「サイト」タブと「ページ」タブがあることがわかります。**「サイト」のタブではこのWebサイトサイト全体に関する設定**を、**「ページ」のタブでは現在編集中のページに関する設定**を行います。

####  サイト全体のページ設定

まずは、このサイト全体のページ設定をしていきましょう。

* タイトル  
   * このサイト全体を表すタイトルを入力しましょう。
* 説明文（= ディスクリプション）  
   * このサイト全体を100文字程度で説明する文章を入力しましょう。
* ファビコン  
   * サイトが表示されているとき、タブの左側に表示される小さい画像（アイコン）を設定しましょう。  
   * 推奨サイズは32×32pxです。  
   * 例として、Googleの検索画面を表示しているときのタブを見てみましょう。このカラフルな「G」のロゴがファビコンです。

![](https://lh4.googleusercontent.com/AaYEOKvtFmXApKyO0BIBoa1gOYbAkXMMNmNCJzLmo-O6JHzyy_EnxJUsvo5PgpRP9jBVkmpLvuIDkxIbGNOILSgxwBdqAdxOuEI1-yqceM85_fAIOpbNmM6VNdjrq8scEkytMX9u3EBdgb8hPEsddpU)

* カバー画像  
 SNSなどでシェアされたときに表示される画像を設定しましょう。推奨サイズ1200×630pxです。
* 言語  
 主な使用言語を設定します。  
 外国人の方が「翻訳サービスを利用しながら閲覧したい」というときに役立ちます。  
 （「コレ、何語のページ？」の疑問に答えます）。

####  各々のページ設定

STUDIOでは、Webサイトの複数のページがある場合、それぞれのページに対して個別の設定を行うことも可能です。

「ページ設定」を開き、今度は「ページ」タブに移動します。

![](https://lh4.googleusercontent.com/h6ViLSpO31_S4e1QtAwVitG4aiwzK81mG9a-UgvtPO5JzYVKLLy7Snxl-AWOBo8RB8z5HSTXnP_drOMFRokCYkOGyP_qcqyCoB_-r9-eMoN4g6Lf7ssfmW6iViDolGIUuwNPGFvafp9-tgu41RlWSQA)

編集画面に表示されているページについて設定をおこなっていきます。

「タイトル」「説明文（=ディスクリプション）」「ファビコン」「カバー画像」「言語」は、先に説明したとおりです。「ページ」タブ内に設定すると、これらの設定を個別のページに対して設定したことになります。

※全ページ共通のファビコンにしたい場合は、「サイト」タブでファビコン設定をしましょう。**「サイト」タブで設定すれば、それが全ページに反映されます**。「言語」も同様に、全ページ共通言語も場合は「サイト」タブで設定し、日本語ページ、英語ページ…などを作成した場合はページごとに言語設定しましょう。

以下２項目が、「ページ」に特有の設定項目です。

* 公開設定  
 各ページの**「公開」「非公開」について設定**できます。  
 ただし、**特定のページを非公開にする設定はSTUDIOの有料プラン**に加入する必要があります。
* Noindex  
 これをONにすると、**そのページが検索結果に現れなくなります**。  
 ただし、検索されないというだけで「公開」自体はされていることに注意しましょう。

### STUDIO SEO対策その④ 404ページを設定しよう

Webサイトを閲覧しているとき、**「404 NOT FOUND」**というページに遭遇したことはありませんか？

**「404ページ」とは、「現在、そのページは存在しません」**というときに現れるページです。以前は存在していたけれど現在は削除されたページにアクセスした場合や、間違ったURLを入力した場合などに表示されます。

さて、それではWebサイトを作る側として「404ページ」を考えてみましょう。

情報が古くなったページや終了したイベントの告知など…Webサイト内のページを削除することはありますよね。あるページを削除したことが、素早く検索エンジンに反映されるかというと…そうもいきません。また、内部リンクを削除し忘れることもあるでしょう。

そんな「消し忘れ」のURLがクリックされたとき、以下のようなページが現れたらどうでしょうか。

![](https://lh6.googleusercontent.com/fCQAJbAt4D9bvflX_wFsUb3IPoTVakx0IJTOk58lxk7XERCPN4dLu7Q2Q6BafsOgVpU8yIWXahbenGqvXHBHyIpJEzhA4hgEl2LliwJRj_EYYphUnisPXYXlytfMg-Li98weUs5gG_p23VMsDSQu064)

びっくりして、ページを閉じてしまうのではないでしょうか。あるいは（間違ったURLを入力した場合は）サイト自体が閉鎖されたと思って、訪問を諦めてしまうかもしれません。

しかし、こちらのページでしたらいかがでしょうか。

![](https://lh6.googleusercontent.com/Lm8aDp0hetlqbdSnvDaG_aOJLK8wPvdPzKOvfliDMnoLRCHotC2mXQHv1cbbcytCZEAEtcYylG4xzvd6dfXGsnsirfnFRtf9Tv5JR2cnXfVDJdmlTpTcpG91yrdLyyTlIGTaVtzXI5t_9G_02BqDYdk)

ユーザーがサイトに留まってくれる可能性がぐっと増えると思いませんか？

このように、**「404ページ」をきちんと設定することで、サイトの離脱率を下げる**ことができるのです。さらに、**トップへのリンク**や、**おすすめ記事の表示**といった工夫をすると、ユーザーの離脱を防ぐのに役立ちます。

では、この「404ページ」をSTUDIOでどのように設定するかを解説していきます！

エディタ画面左のメニューの「ページ」タブまたは、右上のアイコンから、「追加（プラス）」をクリックします。すると、追加するのは「ページ」か「モーダル」か選択肢が現れるので「ページ」をクリックします。

![](https://lh3.googleusercontent.com/sly7822t1q6OQbzVEOs6K6c3p3fMfO5PHUE5c-XspEOrjRZU8pdrKoPKQHOdF8zkx5-t1S0eEor2cxNwMsLHZYUeg7FWVR9bob8vGtJn39x04CCsMPqmZZm-H93p1oRVxKt2JqqR8CmpSiFqFrEDqSE)

新規ページに404ページをデザインします。**「サイトトップへ」のボタンには、サイトトップへのリンクを設定することを忘れずに！**

![](https://lh5.googleusercontent.com/ES_slk7KG9MkN2K8n1gkONitrJ0ridYSXn9YfBRpzjSGTUlKB66zz2Gkrs7hY321pSKQLNfL6xbbL5wP4riRQENgr9fv38Bhfqds1T9rpRztNKK6cYb5_9oJDDFBndsmiRxPQ89_ois_1uLVbas5XFE)

デザインができたら、**画面左上の「タイプ」から「404ページ」を選択**しましょう。これで「404ページ」の完成です。リンク切れの際や誤ったURLが入力されたときは、自動的にこのページが表示されます。

### おわりに

基本的なSEO対策は、STUDIOを使うときも、他の手段でサイトを作成するときと同じです。

**適切なキーワード選定とその配置**（キーワードをタイトルに盛り込むなど）、**要素のタグ付けと構造化**、**タイトルやメタディスクリプションなどのページ設定**…などをきちんと意識して、それらをSTUIDOのサイトにも設定していきましょう。

STUIDOの有料プランに加入すると、**Google Search Consoleとの連携**ができるようになります。これに登録すると、「クリック数」やサイト訪問者が「どんなワードで検索したか」がわかるようになります。本格的にサイト運営を始めるときには、積極的に利用していきましょう！


STUDIOで作るWebサイト☆必見SEO対策４選

STUDIOのレスポンシブデザインで押さえておきたい技３選

STUDIOのカルーセル  ～契約プラン毎に使用可能な機能まとめ～

STUDIO これだけ覚えればOK！アニメーションの基礎マスター

前記事では、ノーコードWEBサイト作成ツール**「STUDIO」で実装できるアニメーション**の基礎をご紹介しました。  
参考➔[『STUDIO これだけ覚えればOK！アニメーションの基礎マスター』](https://implist.dev/entries/f0853e93ec65088b238fb1c39ba42347)

本記事では、STUDIOアニメーションの応用編として、ちょっと複雑な動きに挑戦します！

STUDIOの機能のみでは実装できない「動き続ける画像」をGIFを使って組み込むなど、今回も知って得する情報が盛りだくさんです。どんどんご活用ください！！

1. 文字が上から降ってくる
2. 文字の出現に時間差をつける
3. スライドインの合わせ技
4. ホバー時画像 ズームイン・アウト
5. GIFを使ってアニメーションをループさせる

### STUDIOアニメーション１ 文字が上から降ってくる

ひとつ目は、文字が上から下へと降ってくるように現れるアニメーションです。静止画だとイメージしづらいので、ぜひURLをクリックしてサンプルを御覧ください。

**サンプルURL：**[**https://implist-animation-sample.studio.site**](https://implist-animation-sample.studio.site/)

![](https://lh6.googleusercontent.com/qw77ZxnK0Yl_-h-C4BTqnP_A2xsb9Lbm7uA5_JeeKQlUKdJFroqOFfdGPe86fd4R3rfuH_ntkE8GP5tDjxE_P25OcbwNBq_U8AFvMvkweDpIhObhgn1lfwSxVzfrCaxFjtJFmnGIXi6LbKZpwzmMLuvcUh_wLdPm0mllGd1TezP9k9mplkoWx-48jQ)

では、さっそくSTUDIOのデザインエディタでの設定をしていきましょう。

**STEP1**  
アニメーションが完了したときのレイアウトで、要素を配置します。

※今回は一文字ずつアニメーションを設定します。したがって、まず、（背景画像の上に）文字を入れるための親ボックスを設置し、このボックスに一文字ずつテキストを入れて、縦並びを指定しておきます。

![](https://lh4.googleusercontent.com/SvdU9tpc3t4f3KYyAQTMQQYFUXUJEUeX25-EcRm6vdMnPmZ5YZOjeA7TUlSTjoyODA1DeflnRzAof-XxcTE3NEimgCWhOyhgDHfPWnlFg55UPVzzwY8yN53RJcxgl80s7nCIggO1Afpg9yS7hG9Ok7ecDfezqPEEUAdtVQQTMEafGezHSts-2wTiuw)

**STEP2**  
**「出現時」**のデザイン設定をします。

1. アニメーションをつけたい要素をクリックして**選択された状態**にします。  
※まず、最初の一文字目（「伝」）を選択しましょう。
2. 画面右上にある**「条件付きスタイル」**メニューから**「出現時」**を選択します。
3. タブを**「モーション」**に切り替え、**「移動」から出現時の文字位置**を設定します。  
※「-80px」と設定すると、80px**上**から文字が降りてくるように出現します。

**STEP３**  
**「イージング」「時間」「遅延」**の数値を調整します。

![](https://lh3.googleusercontent.com/zWKUwVpgDj4PHuRCmiQ4Qk1jdilOvlyP9kHi3Gz0ilxf4tz07kEdcdq1aVG36sJSJ2psoOZeDY2gnkPlJFQ3msptZH2KNmwvrwIG1PNMYqWPrAwxQBexpWTEZZdeB4lyCTmujEfljcE5MrRyEHa0FfUWv50YGFOiqoe0QimnlbTM8zkpvTTzYhWJsA)

**STEP３**  
他の文字にも同様の設定を行います。「遅延」以外は、上記をまったく同じ設定でOKです。一文字ずつ「遅延」を200（0.2秒）ずつ増やし、時間差をつけます。

![](https://lh6.googleusercontent.com/tkujZFTBnWFhJZLv8_cXq-l8FXWOcEwMRKNeFoh_HlX-Db9dE-1hfBI5QrDU6NECHqxFWlwNYDq2LsCWvvFz_8lHMKiZjvHc99mt1ZZkiqyW0o-aXiBO370ZT11b1N7WJQRZyqXnCeBjy0BL5f120_f-5wOLfHYAdgLsp5Hl_NvTE8nnVu43ePQYJA)

以上で、「文字が上から降ってくる」アニメーションが完了です！

#### 文字が横から流れてくる

同じ要領で「文字がよこから流れてくる」ような表現も試してみましょう。

![](https://lh6.googleusercontent.com/HmXr2LqIDJb9psyLOnDVTSKhyt3w4xB36Zrcsmx4IADwe34xEzcBSUWS7uaGYJQuW_iaNxcpEOlzNthIvibgKxiNM2T-dprC0WPDUGatAJbWLhEh6c83f0L-Ry990V1UJfbQtsezvwptKRAwcJGo67OdHsG_lkHEkbznvcfKCR44mMNohftwci78NQ)

基本のSTEPはいつも一緒ですので、ここでは**「出現時」の設定**のみを解説します。

背景画像が現れてから、一呼吸おいて最初の文字が出現します。ゆったりとして間をとりつつも、間延びしないよう**「時間」「遅延」**の数字を調整していきます。

![](https://lh3.googleusercontent.com/f0NllHIY-SdqnKPKfsz_TeEdimN7JparQ3S7DaKdsKXMlBggEggiMgoB7erZ4JJbqGBrnOnltjU0WJMXT9bowEAYweakIRI9Es91Scr75UYitGV7OlBtoceTbRQ8kQV_deQAYy_BKU8BlfdKInZJefaeLs-Fy3Dm5IQ5hYu-llxRDEjNmrKT7cr0aA)

最初の文字だけスライドさせずにふわっとフェードインします。二文字目以降は、X=-60pxつまり60px左からスライドインします。

一文字目がふわっと表示され終わる頃に、二文字目がフェードインし始める…その絶妙なタイミングが上記の数字になります。

ご自身で数値を色々いじって、表示のタイミングやズレを体感的にとらえましょう！

なお、最後の「ー スティーブ・ジョブズ ー」は、以下のように設定します。これより上のメッセージが全て出現してから、ワンテンポ遅れて出現するように**「遅延」**を調整します。さらに、出現にかかる**「時間」**も多めにとって、余裕をもったデザインにします。

![](https://lh3.googleusercontent.com/NHvJm-vJUkdoMVUudo8IrcHTkHEgcRBFzd0tKqdOP_haoGSeVTW1VJEg3Qrjn_JTJzC78tWZo6aQ3lyZDieFK5hd3q9tHxgtFI0rjh3SxfN6Xsr28F_0LncFz5a-M7MWxedOq7X2zf0SthO-mjrzWkHy9GAQkMPILphfs8GFt26gJ1kDDKP8neYhEg)

### STUDIOアニメーション２ 文字の出現に時間差をつける

前章では、文字をゆったりとフェードインさせることで、「心にゆとりのある印象を与えるデザイン」を演出しました。

それに対して、今回は、文字をパッパッとテンポよく出現させ、ワクワク感を出してみましょう。

**サンプルURL：**[**https://implist-animation-sample.studio.site**](https://implist-animation-sample.studio.site/)

![](https://lh3.googleusercontent.com/aGYkuP99Nbbli7yCbogEeVLFBNUdqz0i4apbs1zcPFWLAopjqubMepmydh74jzFe0QPCrkEe22np0CwoCCGpX4u8g34AIyDljwqM22G-Vzfvw1sdTsQnCVqMLsFkCT29pHnWm0sUG7pGoKHKNQswoSnHzuSUYxWb0iTj0zB4XrB6DChYhw9LnssFOw)

出現時間を均等にしてもOKですが、今回はもう一工夫してみましょう。**強調したい文字の出現時間を多め**にとって、「重み」を出します。

※今回は、見本として（目で追いやすいように）ゆっくりめに設定しています。実際は、間延びしないように、気持ち早めに動かすとよいでしょう。

**出現時の設定**は、以下のようになります。

![](https://lh6.googleusercontent.com/pEEwEVqCELA7eh4PeBJ8hbovvqpOb2yOIPOD_UemZAv-2QgtYUwFoLfADzigwJUcUGjKpj_Ml3Lf_p2x8N3WCcmtSxaw0oOLPKM0IT6ls4bLv0V4MdOsRiSZyJ31s4si4Z30Wb5setEhD1NNK_j0iMA9JrtJSa9f0m4U3W_FkYS_gm-KP0k61yb45w)

最初の1文字目（「2023」の「2」）は、背景画像が現れてから一呼吸おいてパッと現れるように設定します。この「一呼吸おく」演出が「遅延 500」です。そして「ふわっと」ではなく、「パッと」現れるようにするために、「時間 0」とします。

2文字目は、1文字目に「200（0.2秒）遅延」して現れます。この調子で、「2」「0」「2」「3」と遅延時間を200ずつプラスしていきます（「3」は「遅延 1100」となります）。

そして、「2023」の出現から少し”溜め”て、「12.」「31.」を表示します。「12.」は「遅延 1900」、「31.」は「遅延 2700」です。さらに、「始」「動」の文字は、上記よりさらに”溜め”て、それぞれ「（始）遅延 3700」「（動）遅延 4700」で現れます。

#### 文字の出現に時間差をつける☆別バージョン

![](https://lh3.googleusercontent.com/SsuJ5J3tT-cOdQ6bjP1oL5kTSWYgitDHLmu8_DGfqVBbiJtFpS3yr_qGKOjeOuyMQLXTBr1vX0QCoNQUw2aDfvFwGUT2kbSqVrBoppvT_UWPJ0jkbn-XwyOYcyYu47aImFtAT0W2GbXXOSwJOVvVgmOBdGIyPhZK2HbZ1UIS3tRY0BQtGFJdkJ_0Qw)

こちらは、文字がその行のベースラインから上に向かって出現するパターンです。**「出現時」**の設定は、以下のようになります。

「2023.12.31.」が入った文字ボックスの設定です。

![](https://lh4.googleusercontent.com/DBl6TsiyhlxH4cindwhxueCES7R55IlMGgIRnaJock16KRBglAHhMIgPM5xA0UGFCGjQRRffhcozEdBGXrDRvskUR-qqQ4MkWVPIHvR5DFGpmngGZiCXj_xWd8XLXpUnLfGuJyFGsAKh5qbZFkB6STz-oJcvE8QSw0nluX5CKnnXsS3pjdpIZbtpvQ)

「始動」が入った文字ボックスの設定です。

![](https://lh5.googleusercontent.com/rJaoZOva3qrkg9JHAjVoXbvBlPssFUcBS08mJu-mPxugj3lMQbaOE79lnSlqurOVi9nEdu7htS5Y20Cv_eKB6NILuIZYYXFIl72FWvDt3wfneNe7OznbytoUX0N-bLpEC5v03TtB8m-zPgoAMBe_oylzR0upAMwyKZGGz1wfocboBqT6BcPflbIjcQ)

「移動」の数値は、Y方向に何pxの位置から出現させるかを表します（Yは上下、Xは左右）。Y: 100pxであれば、出現時にはこのボックスが100px下にあり、「時間 600（0.6秒）」かけて通常位置に移動する、と設定したことになります。

日付の文字より、「始動」の方が文字サイズが大きいので、それに合わせて移動開始位置も下にずらしてあります。

ページを開いた瞬間に間髪入れずに文字が移動すると、ちょっと忙しい印象になるので、日付は「遅延 800（表示後0.8秒後にアニメーション開始）」とします。「始動」は日付が出現してからさらにワンテンポ遅れて出現するような時間設定です。

### STUDIOアニメーション３ スライドインの合わせ技

**サンプルURL：**[**https://implist-animation-sample.studio.site**](https://implist-animation-sample.studio.site/)

![](https://lh3.googleusercontent.com/bispALAEvLtFj4ZEEDEZZF29DwlODWb7ydepclA8hcafXeiaVG1kR0w0dK-mWWiXiiE7F0S7rYICc3szGeDQOMZUwpgLDHK4SC8vTAXamkppBcWp-FLBD8fMnfCAgz38FOAJh1BuRqjepmW3rFRgd0jLEfCzwDjlvhdfGL40rSkHakBbb42rRxo-0A)

**「出現時」**の白色ラインの設定です。画面を開いてから1秒後（「遅延 1000」）に左から右へとスライドインします（出現時の位置：X方向に-720px）。

![](https://lh6.googleusercontent.com/kGToo-pL0NQ3kJPnozs-BXcIDyGSolcQJsIoMRpzs_Tw5h7ZXGsybqqMoFWWVG7hlaNQcYk1mnkCh-3BqKo8unozbD_RAp_zifEhcnjHmzhGPuTOVTcwLWCZ01eDCqV3PlES-r8ctza3NBHNMXRbHpmHa9uhSwj_kUrGKqEPtTECjgl8AlGMUA3F_g)

**「出現時」**の文字の設定です。

![](https://lh3.googleusercontent.com/hgQpLo5p-Q7K4aryLHhObj55SVkHxiCJ9NuMPCaNLy-6pTQwQs5uoL354y-v2q8vYpLVCf-PXzQCz9Iy9XnJgztoUiXqUXVipC7Bb_Rp-ZcOz1rDxTOa3F0Nxi87hi7dhbomDfWlNFwn-kalI-2WvYvpq3lN9oi4PkI78hFO-XJGvQNKDsl25dQMeQ)

「IMPLIST」が下から上へ、「SUMER FESTIVAL」が下から上へと交差するように現れます。**「イージング」によって「現れ方（速度の緩急）」**を設定できるので、文字がサッと現れたあとは、ブレーキがかかったようにゆっくりと定位置に収まっていく…という動きを演出できます。

### STUDIOアニメーション４ ホバー時画像 ズームイン・アウト

STUDIOアニメーションの基礎編では、ホバー時に画像をちょっと大きくする技をご紹介しました。参考➔『STUDIO これだけ覚えればOK！アニメーションの基礎マスター』ULR

今回は、その応用編です。ホバーすると、画像の大枠のサイズは変わりませんが、中の画像のみが拡大され、ズームインされたように見えます。

![](https://lh3.googleusercontent.com/ez_taBzqLCD4DdH-yfZUPVJQ9cBlOqOj-uUiNOzzWmPiWydbx4BctXR_B88FIU8WxIldoZIYpXhmrv9QCwvNS0uqx6RkFJUkTsfiDeeH39vWNPRUAzbcOJjiKI5jjb2AOONnBk1dd_U9DLn4Xp6GbyLermGFnd1NFEShUSXlzTTtY6z3dAWDsFRdcA)

さっそく作成方法を解説します。

まず、画像の親要素となるボックスを設置します。そして、設置したボックス内に画像ボックスを入れます。このとき、画像ボックスの縦幅を100%、横幅を100%とし、親ボックスにぴったり収まるようにします。

![](https://lh4.googleusercontent.com/vGw4D2wjtyODgYfodXozr8HeF5MXwZLBB1wJe3GyQFqaIN04dQmAFgzX77x2Pa-FRpTw1BEAzd6lfl9shTjsYek8glgSEzeG41NuLx4obRy1SnPmeGSO7XxrJIOtVdlEpBWDXlVdRAWPQF-99XTQYGDzMuBio_H7tYB_9bHkmakiNgQCqm_UGnzr0Q)

次に、画像のみを選択して**「ホバー」**の設定を行います。この時、誤って親要素のボックスを選択しないように注意しましょう！

レイヤータブを開いて、確実に画像のみを選択することをオススメします。

![](https://lh5.googleusercontent.com/-lqYEyiDiAt7AL2bvU1WPLxIT53grmO0FSTOtuxrA6gpQj9L8oJOFzdiCtxvJw0qtWH65DWUdyflNbO3wgwkjN0kBdGlxiUTsXth5oq16psdj7DhY3sTV2_sCD_ZBa7ghFmxM9YjsMZVHfYpaX7ty1SYrUlmaI9j7G1o2btI9gFgjebRor4XZdBU7Q)

画像に対して、**ホバー時のスケール**をX=1.5, Y=1.5（縦横方向に1.5倍）に設定しました。

ここで、いったんホバーに関する設定を閉じ（対象の画像以外のどこか一点をクリックすればOKです）ます。

そして、今度は画像を入れた親ボックスを選択します。そして、**「はみ出し」から「切り取り」**を指定します。こうすると、子要素が親要素からはみ出した部分は「切り取る（=非表示）」という設定になります。

![](https://lh3.googleusercontent.com/sC4IG_mnJ6-J5rAocqXKxhzscKrlcq5zQ7RTuS0Rn0ONuZclJ3twz2yPAN_L2Doi9fPpLj99uCVhPy6nKbkDP2y8BHvR_KNm8Odv__vyxHq5aw2tV2tfhXuD4Hrm7htpWfysBcXu7N0NdoWVLOTC6vmlVB_zrKW-M_r7mKlxA5J0iniy-iPb0huefg)

これで、ホバーした際、中の画像が大きくなっても、親要素によってはみ出した部分がカットされるため、全体としては元のサイズをキープします。つまり、表示される画像のサイズは変わらずにズームインされたような見た目となるわけです。

#### ホバー時に画像がズームアウトされる

では逆に、ホバー時に画像がズームアウトされる場合はどうすればよいでしょうか？

最初のステップは同じで、まず、画像の親要素となるボックスを設定します。そして、このボックスの中央に画像を配置します。ですが、この時、**画像ボックスの縦幅、横幅を100%以上にします（今回は画像のバランスを考えて120%にしてあります）**。

![](https://lh3.googleusercontent.com/B9PPLBbHdYjZQ9eup7DhrVFL2SrPNFPFpO5dlVoyisS4mg5sCTfDcOpdLpkscM0a0JjMq634I7qDn0RV298lpDirglTwxx5aKia3v2E68js9EiGYPz7OWbH0epmXpEqfxjlCGA0A-fWAUVwTlb2e1z0Mg5yjtCp-JYQLv5CixgTWwikQoOcmJSfr3A)

次に、親ボックスを選択して、**「はみ出し」→「切り取り」**を設定します。

![](https://lh4.googleusercontent.com/1heHQbHMsNLSqx2L9iSfnVv8aebcXvhr6kWJGLmWJJErlRwijtG70xAia4bvg2ZSetdhXGE-NmXnSyq2NGEbuMaHXdsj63qep0XlvjeToPficFy_XUbpbBlKl9pm2HKGUqGyROrTq0jHonGzujKrw9o45Dn0dPuAM305LYdrSZZ8EZT1lVP4iIG3Jg)

このうえで、画像のみを選択して**「ホバー」時**の設定を行います。スケールをX, Yともに0.9としましたので、ホバーの際に画像は0.9倍（90%）の大きさになります。

![](https://lh3.googleusercontent.com/WrNyRT6ZMm_DMFIP5iI23dCnBM2yExAheYl3ln-7L7842pzrtiQuRfMv0BAteh6WCD_82hAG2hQ7YZQ990mDLNII40DKjg5dWXgLpuyVFU2ght-D3-zvnG1iU6G_KcTHkfeb6xBDNne8eOTxN_yU2IFHJZ9-TdzJaCGUrpDwCNPYBgoKLkO0DIQgOQ)

この90%とは、**元の表示サイズの90%**という意味です。今回、元画像はあらかじめ親要素からはみ出す**120%**としてあったので、それを90%に縮小しても親ボックスに隙間ができることなく、ズームアウトする見た目を演出できます。

### STUDIOアニメーション５ GIFを使ってアニメーションをループさせる

STUDIOのアニメーション機能には、「無限に動き続ける」という設定がありません。しかし、**GIFを画像として表示させる**ことは可能です。つまり、**GIFで表現できる範囲であれば**「動き続ける」 画像の設置ができるのです。

今回は、試しにこちらのサイトを使って（無料）GIF画像を作成した例をご紹介します。

（『アニメーションGIF作成』 → <https://ao-system.net/gifanima/>）

このサイトでは、静止画像をドラッグ＆ドロップで（最大50枚）、パラパラ漫画の感覚でアニメーションを作成することができます。「リピート回数」に「０」を指定すると、無限ループします。

**GIF作成に用いた画像**

![](https://lh4.googleusercontent.com/T5701OxL8_9xrcJ6GVPNKA0kna3kLkVPSUS84b3vVRyDtmNGscz-ABg9DcD7sh0ftwed-yvpUJoBsyYMRU0eJ_gRIrSM-xzf0RhAwqU7Qe7Qkeco_N3WZDKZO_VDsfNXtFbOuk8DawToHDyXgW1z-V_kKGPr-geLYkNT5vpZzUuMqIZhdl-hTL97uw)

※「透過させる色」として白を指定すると、背景のみならずパンダの体の白色部分も透過してしまうため、pthosohopで薄く色付けしてあります。

**作成したGIF画像**

![](https://lh6.googleusercontent.com/_AxbIJNZIyXpBLnMI8s0hmvpoOc6gbx_FtjF1O-cm-rrEqAoZGa4Z1AApehDteUpsdRX6okGtAOLUI2X1LanEPi_GwMlJQglVoOhSwyTnVecDt3zDgesGHKr3atQgxSjRNbF6hNlkokSC9MzJ_f4y8cQEM4gRsM9XzevZSncIJ381WKH1UZP5gArvA)

GIF画像は、**動きがあってもサイズが大きくならない**ところが良いところです。この走るパンダのGIFはたったの20KBです（なお、元画像は500×500pxに縮小したバージョンで約30KBです）。

また、背景としてこのような画像を作ることもできます。これらは、そのままSTUDIOに「画像」としてアップロードして使うことができます。

![](https://lh5.googleusercontent.com/BlKWNv0Oor4H2zr1My0o1qpgPJs9ycpaIGvls8kMn0q_oxfKdjxi6vpDTR1VwqxsLV_YlKoiY6j6pxsf9PJJ1gaWUS5V2yNqc_pwNreCTiEPj3UMSLwiGOfxXZVY83DaOihmLnJeVxalu13n34eEd1zCCpgo9RNh6GoK9LuxRqJSORAz3CCyBX_kXg)

このサイトでできるGIF画像は「画像を指定した時間で切り替える」ものなので、流れるようなスムーズな動きは難しいといえます。

写真中で「動き」を演出したい場合は、「PhotoDirector」などがオススメです（有料）。このソフトを使うことで、水面が揺れ続けたり、花びらが散り続けるようなGIF画像を作ることが可能です。

参考PhotoDirector →<https://jp.cyberlink.com/products/photodirector-photo-editing-software-365/features%5Fja%5FJP.html>


STUDIO アニメーション実践 サンプル5選！

これまでに、ノーコードでWEBサイトが作れるSTUDIOというツールの使い方を11回にわたって解説してきました。

今回と次回は、その総集編としてWEBサイト制作演習を行います。

例として、以下のような「華道教室」のホームページを作っていきます。これをマスターすれば、「地域のお教室」のホームページが作れるようになります。目標完成タイム2時間を目安にトライしてみましょう！

![](https://lh5.googleusercontent.com/RCle7J5r9SLwiTtKMTQ8vXoMgO03z1fOmzDo3BVpnuyFOi-JoxW5yIV4xKuQvTMYEaujVZ6EbJ3XFsj6P6AhS3De_Q5Hm1Oy3pHTTmbaqVdq8J8JJmhz0WkkucFqZom_A7oIgDRhdXwKKT32ekL6Ek6BRzLUuNVmGrsMyymmgBoSPFkv8ojimxjTXhKwUQ)

完成したサイトがこちらです（本演習のための架空の教室です）。

**URL:** [**https://implist-training.studio.site**](https://implist-training.studio.site/)

サイトを見ながら、STUDIOでの作り方をイメージしてみましょう。作り方がパッと思いつかないセクションは、解説を読みながら手を動かして練習していきましょう！

【今回】

1. 全体の横幅を規定する
2. ファーストビュー
3. 「お知らせ」セクション
4. 「教室紹介」セクション

###  STUIDO演習 全体の横幅を規定する

各セクションのレイアウトを組んでいく前に、下準備を行います。

今回は、WEBサイトを開いた時に、左右に余白があるページにします。そこで、まず、ファーストビューを含む全てのセクションが入るボックスを設置し、ページ全体の横幅を決めます。

（下記の例では横幅を80%としていますが、任意の値で大丈夫です。75〜90%くらいがよいでしょう。）縦幅はめいっぱい下まで伸ばします。

![](https://lh4.googleusercontent.com/Fa4nUppSivFT6cJP6MHhVMJuc-jkig0CeMBHv5zkoodzc34JPXCApxoEp-9BGGHxZLs5CzyvX71He62vcZByEU_kjvqomKWm2QlJFiMX1bNgnh6odZnYOxlqF127_qJCwcxIDRTLM_fiIytPbExJokMk8-sZn8HxNceQJChDR_rHnpZAzkNs0cpFGoxWxA)

このとき、この「全体ボックス」に薄くシャドウをつけると、ちょっとカッコ良くなります。シャドウは**「Y方向: 2」「Blur（ぼかし）: 5」**で灰色のデフォルトカラーでOKです。

### STUDIO 演習 ファーストビュー

ファーストビューは、以下のようなレイアウトで作成します。このセクションでは、以下の点をしっかり再現できるかを意識して取り組んでみましょう。

* ナビゲーションメニューの実装
* 文字出現のアニメーションの実装

**完成ページURL:** [**https://implist-training.studio.site**](https://implist-training.studio.site/)

![](https://lh3.googleusercontent.com/nBqlL_nZgKTTjlZGpjO_WYksVJHfp84A5XNqDEZkf62EEd8sib1GXfA5DPAPB8CgxJ0mDZ27N4UTGGz9J50g4btrunGoVoUoq5w4aC92vkT6FSCXq42tLQsPAsNVsKCEUR_-H8GY0oZYVxbfatp_f8_BKErbHVrl3GCzdsK77xQ0hvx7M6Teigt3G2xDEQ)

まず、先ほど設置した「全体ボックス」の中に、ファーストビューのセクションとなるボックスを設置します（通常のボックスでなく、画像ボックスにします）。

ファーストビューセクションの縦幅は90vhとし、**次のセクションがちょっと見えているくらいの長さ**にします。これは、**「この下にもコンテンツがあるのでスクロールしてくださいね」と、ユーザーに暗に伝える**効果があります。

※vh=「viewport height」です。100vh＝画面幅いっぱいという意味です。縦、横それぞれに設定可能です。

![](https://lh4.googleusercontent.com/6yYLEIeNQkENaoJitvUoEi6YDY_gmJJM3WhyADSnG3x0-r5NNZywXJCXVzFJ_jR_xtqDDSHJQcBx9eFeH9qRTLkGoEilnQaYvJq9mgWXrlc-VqsjG-Yz49rlvLIWBKOG_Tnqwc5f_IpMDyR08KxMxyH50ny-xKi4p_C5BL-S5l3v8lCu2eHVUZkTBqCW-g)

今回はSTUDIO提携サイトの画像を使いますが、実在する教室のWEBサイトを作る際は、クライアントから写真を提供してもらいましょう。

**参考：『STUDIO基本操作② 画像の設定と編集をマスターしよう』**  
 →<https://implist.dev/entries/6a2007be3c1757bc7e1a6456373df5af>

**One Point**  
メインの写真はサイト全体の雰囲気を決めるため、慎重に選びましょう。また、デザインから自身で行う場合は、**メインの写真中の色でサイト全体を構成する**ことを意識すると、統一感のあるサイトになります。

#### ナビゲーションメニューの実装

先ほど設置した画像ボックスの上に、通常の「ボックス」を配置します。これがナビゲーションメニュー全体の親要素となります。

この中にさらに2つのボックスを加え、**横並び・両端揃え**にします。

**※横並び・両端揃えの設定は、2つのボックスの親要素に対して行います（「中に入っている子要素をどう並べるか」という設定だからです）。**

![](https://lh4.googleusercontent.com/OdR33Qt1Aq2t_XtH1pINtjssX2bHLbFoz_j-__OVSxtaKX7Tg-9SBAO72oFqrhOzgkgwZAuRdHQBTaCaJrYDX6umiLEBwkdvFQhMvUxWZWX5uKk5a-9xsDGbMrdA_xOfdvYonZn8xC7-W2Ffq9qtwVJkCB-uAWEg21bezK64rz-TmsRZPbXi_bfnfmyBFA)

※説明のため、ナビゲーションのボックスに色をつけてありますが、後で透明にします。

先ほど設置したボックス（スクショ中では水色のボックス）に文字を入れていきます。メニュー4つは横並びで配置した後、等間隔に設定します。

![](https://lh5.googleusercontent.com/I9zNLSvxVcsdcMKD-HnNvAGfl7PjIYgaeF3D5yStWA1dMym9cfHM0xBJtMbcGOOwQRiRmENXY74TJSq99EbR7CqpBg04DGf82yEK9aZ7sGIqMMXcVuQwNobrnEz9Ods4bxeayP-iqmtOfGUJnONGoVemakNdIyAfX_3l4GSvfExpj4VIdXKGIRUoWsvNZg)

文字サイズやフォント等を設定した後、親ボックスのサイズ、マージン、パディング等を調整してメニューバー全体のバランスを整えます。

今回、筆文字っぽい明朝体は「Yuji Mai」、その他の明朝体は「Sawarabi Mincho」、ゴシック体は「Lato」を使用しています。

**参考：『STUDIOの文字装飾テクニック5本ノック！』**  
URL→<https://implist.dev/entries/154277bd6525864772a21644cca341a9>

**参考：『STUDIO基本操作① ボックスモデルを制す者はSTUDIOを制す！？』**  
URL→<https://implist.dev/entries/e3d8b5449404c6034a0d292d21e2d7a9>

####  文字出現のアニメーションの実装

ファーストビューの「伝統の優美」という文字について、上からひと文字ずつゆったりめに出現させてみましょう。この演出は、和風サイトに相性が良いですよ！

まず、文字を入れる親ボックスを設定し、1文字につき1つの文字ボックスを入れていきます。親ボックスには、文字が**縦並び・等間隔**になるよう設定します。

![](https://lh5.googleusercontent.com/Hf8roKgLDwcfWXN0ZsS1mVMp5ABewOpUCo6LaeqU6sh5-aj1QqphNARXkS2xsjaddrj3ULVEmdcYhpdPRb_1DkEBFrfGkRoy76BiCX8G7lC_Ov__rFWjJ8sqYXX-Nn65MQljGNwhnhXciUOqoE9W1grXMtFifZ-pXO90DLczuaejN0W6sWCVZFH8N1-rOQ)

文字の配置ができたら、1文字ずつに対してアニメーションを設定していきます。アニメーションの設定は、以下のステップで行います。

1. 対象となるボックスを選択する
2. **「モーション」タブ**に切り替える
3. **「条件付きスタイル」**→**「出現時」**を選択

ちょっとよくわからない…という場合は、こちらの記事でアニメーションをじっくり学習してみてください！

**参考：『STUDIO これだけ覚えればOK！アニメーションの基礎マスター』**  
URL→<https://implist.dev/entries/f0853e93ec65088b238fb1c39ba42347>

**参考：『STUDIO アニメーション実践 サンプル5選！』**  
URL→<https://implist.dev/entries/6796a8167426a4500e9332af26b2f7f9>

今回は、このように**「モーション」**タブの数値を設定しています。

![](https://lh4.googleusercontent.com/O_sgvJ7tt-WphRZQIBh65iZo8KTYx9HyR19pHrjSvtkAgeRW6rs3Gp0Cxxv8FYYPNOyos1qEnH5mkHgv4N5m0vq-oi-_AxKTTyaaZssPg0D1RME5xj0YWF2vzLCv3HDxHM_HcSBGsSnrcPxo_h6nkTNmNL0boOCq4iR8j_m2lDg5HXsosF46hotoEOZnnA)

**1文字ずつ「遅延」時間を300（1000=1秒）ずつプラスしていくことで、出現時間に差をつけます**。また、**「時間（文字が出現するのにかかる時間）」**は、1文字あたり1800とゆっくりめに設定しています。

【補足】  
今回のサンプルは、文字の後ろにもうひとつ画像ボックスを設置し、ダウンロードした画像を入れて作っています。

![](https://lh5.googleusercontent.com/969OP1WNx4tmFvUexzjQzLLn_CMy277BsFziUuN7KRCrd_cBm3Tm8H2bB4KEjS32D4For2rDqStOhmxCE9_crIfrlEP8MsZSpMVy1He_wTPm-rOro7vTaaJM3uLyLmJaAtvs-uq78K0Dn8q8kse6-iu4VFnzRsRqfv7Wb5H4tauh9h1ksXs0UIPvA2VOaA)

※イラストはイラストACから取得したものです（「筆 丸」で検索して見つけてね）。

### STUDIO演習 「お知らせ」セクション

次は、「お知らせ」のセクションです。本章では、2つのポイントが習得できているかどうかを意識しましょう！

**完成ページURL:** [**https://implist-training.studio.site**](https://implist-training.studio.site/)

* マイナスマージンをつける
* ボックス内の内容をスクロールさせる

![](https://lh5.googleusercontent.com/h-luvhLIDuIYv_ojD-nVlSOQiXqF3rxtDk8BQf2qkqv9W8Mu7ZYT12Zd2rZKmbIGYL1lRoIB5dmg5cBUFC5wLJos2uDIpjfIotXf9wzwa6BwE6zYf6cHKBolMeaDIKd5ovsVjVRQzixAokxNW0rzC9VcmIF3XHhoGvykO0DeIGPSNlSI-IZHhjCtf-EfQg)

#### マイナスマージンをつける

**「マイナスマージン」**と聞いてピンとくるでしょうか？…マージンとは通常、**隣り合う要素との間に間隔を設ける**ためのものです。例えば、「マージン50px」の意味は「隣の要素との間に50px分の余白がある」ということですね。

このマージンの値を**負の値**にすると、この逆…つまり**「マージン -50px」であれば「隣の要素に50px分重なる」**という意味になります。

以上を踏まえて、今回のレイアウトにチャレンジしてみましょう！

まずは、前のセクション（ファーストビュー）の下に、新しいセクションの親ボックスを設置します。そして、その中に「お知らせ」用のボックスを配置します。

![](https://lh3.googleusercontent.com/QRkKNnpAGGlmstM1Bwi7h9aBuq3WxaAi-nR6c7uAvGavbQOriAAObgaJLELM_vYCJVHgBoo3iFEJthhVPA1sEtnVFfdHTKdTUWhKRmKxVbM2bfDPWuUV56sliHCtmMHbPwEX1OYICGBjP1oIFk195LLVsjnPhufPHRNWIT54OZnkcVh4ejrjP3ypbW6dRA)

この「お知らせ」用のボックスに対して、**「-40px」のマージン**を設定すると、**上のセクションに40px分の重なりができます**。

※デザイン上、このボックスは透明度を少し上げ、シャドウ（Y:2, Blur: 5, 灰色）をつけてあります。

![](https://lh5.googleusercontent.com/oYH_dlUhnx_XLPQjOjgwaN_es-3QMARKDogW3GHm1IHarA-D-qgBeEwOTBue215UimIoEBBLOMKcZKSBpR_5h9bdxvSbNtMbBQVak0ZK7HJdNTy86ELrbunVX0yLU-0_W02OsIVzcltK844EHieFQ9GFEsyZ0lY3zMHkNJPBCkwnvRKmr382Ulljl_NGgw)

マイナスマージンについては、こちらの記事でも詳しく解説しています！

**『STUDIOの便利な画像操作5本ノック！』**  
URL→<https://implist.dev/entries/432ba7f2c3f4c672bbf48978fd1e09c4>

#### ボックス内で内容をスクロールさせる

ここでは、「お知らせ」ボックスの中の過去の項目を、スクロールすることで表示できるように設定してみましょう。

まずは、先ほど作った「お知らせ」ボックスの中に、もうひとつボックスを加えます（これを便宜的に「お知らせボックス②」と呼びます）。このとき、**「お知らせボックス②」は十分な長さをとっておきます（はみ出てOK）**。

そしてその中に、イベント情報の個数分の文字ボックスを入れていきます。

![](https://lh3.googleusercontent.com/2mmS4InLdflInL6Wo7PxL84safJqnNfQ-r4E1adfYTcLKPI3hXISbCbWcG-mvWtZv6stL-Gw7nTevdLO5Y_5HEpLMTexBszNep5kPeP7ZIgvmb0X87paj9WYgbcO6z4uFkb3-GaNQ7KnyYU2GxyaOwtXNTpl2NkFMXbw5U4n682kf9XegoL9ce9_BVJ0JA)

イベント情報を入れ終わったら、**「お知らせボックス②」を選択**して、**「はみ出し」→「スクロール」**に設定します。

最後に、**「お知らせボックス②」のサイズを調整**（ボックスしたの白丸をクリックして引き上げるようにドラッグ）して完成です。

![](https://lh5.googleusercontent.com/CKlJ2VHYYffEv6lbJSQ2psc7xe5zBbb_MTo2RkHtVAEGNSF94EeARx39zkhD7G2XmNs6YitF-JEPIRL_WzT6UtnM6sfc4GECmz-wOkOtOhG77phqRo7tlmIRj4WdrRKYP4bbzHwteNv_39pcQO96XxE9v0_Tgff4O1rD3vRi1I3rRVJ7uSdDpkLr3BcVsA)

イベントを追加したい場合は、「お知らせボックス②」を再度十分な長さまで引き伸ばしてから文字ボックスを追加しましょう。追加後に、ボックスを元の長さに戻せばOKです。

**One Point**  
エディタ画面ではスクロールバーが表示されていますが、**公開されたページではスクロールバーが表示されません**。ですので、**「スクロール（もっと見る）」と表記するなど、スクロールすることで隠れたコンテンツを表示できる旨を示しておく**と親切でしょう。

### STUDIO演習 「教室紹介」セクション

本章では、「教室紹介」のセクションを通して、ホームページを制作する際のちょっとした小技をご紹介します。

**完成ページURL:** [**https://implist-training.studio.site**](https://implist-training.studio.site/)

![](https://lh3.googleusercontent.com/0Is1mYP9kQ8f9AF1pTyN0JtQApFg3zOioRndos7ufPleH4j5duKEaHQJfF9wb9YDh1SSnoKJ6OCu8lepcwvNdvsQLGt9mRDatSu_WX5GCtS6JvcsXy7_KKtiZ7vTdH_cnyTwXp0wnnaoDt9nu5EfZwmV7zrH2hU4R_07iqDteZrTqm8lyGqPkPizMtJDdQ)

上記のように**「写真＋半透過の白背景＋文字」のデザイン**はよく見るパターンだと思います。

しかし、いざ選んだ写真を配置してみると、**「写真が鮮やかすぎて他のセクションに馴染まない！」「印象がキツい！」**など困ったことになった経験はありませんか？…そんなとき、STUDIO上ではどのように対処すればよいかを解説していきます！

#### 背景画像を編集する

背景画像の主張がちょっと強いかも…と感じたときは、画像に編集を加えて、少しマイルドな印象にしてみましょう。

「明るさ」を調節するのも有効な手段ですが、今回は**「モノクロ: 0.3」「ぼかし: 6px」**としてみました。

![](https://lh5.googleusercontent.com/j0ga7WSRymB2d2z-WhsTUiPm3Zl7xDoeWFlGXpynrb5hXnWZjwrXZ-7_eIU_hgR2mJHanwStvSUMmHlzo0NTRAPOeWKyNeZaVGYMkjkLl_tgXpiR0_XfDOBV3n5EOmUKoNy0H6f2XaTp4ryJkX75cyPGaRBEAJEKIj-q9YXx_MYypcf1Kxs2DSVryEjajg)

「モノクロ」は「1」にすると完全に白黒画像になります。今回は、色を少し残したいので「0.3」とやや控えめにするに留めました。

背景画像が文字の視認性をちょっと邪魔していると感じるときは、**「明るさ」や「モノクロ」「ぼかし」**等の数字を調整してみましょう。

画像編集についてはこちらで詳しく解説しています！

**参考：『STUDIO基本操作② 画像の設定と編集をマスターしよう！』**  
URL→<https://implist.dev/entries/6a2007be3c1757bc7e1a6456373df5af>

**One Point**  
画像に**「ぼかし」**を入れると、セクションの区切りまでぼやけてしまいます。そんなときは、以下の方法で対処します。

![](https://lh4.googleusercontent.com/5eI15C_Kk8wbxOSUGkmV11QlPiQvaQN0Txe63GGlruXyHPIbTGWR7WFXnqXqED8lj3zgC8BT6Fc-4f3Nl0xtIHpjl0rkRBF-pnHg7j4Y-aqmGJ-FKAF8VaNIZHhB8_TekBpIJmTWgAy9VvHspJhWlDQQHRmW87lsJfddyEYqnnOSxtIIoysgbqn2jbL8hw)

1. まず通常の「ボックス」を設置します（親ボックス）。**このボックスを、設置したい画像のサイズと同じ大きさにします**。
2. 上記のボックスの**中央**に、画像ボックスを入れます。
3. 画像ボックスのサイズを、**親ボックスよりひとまわり大きく**します（例：縦幅103%、横幅103%）。
4. 画像に**「ぼかし」**をかけます。
5. 親ボックスを選択し、**「はみ出し」→「切り取り」**と設定します。

こうすることで、画像が親ボックスの位置で切り取られるため、画像そのものに「ぼかし」がかかったままで、境界線ははっきりとしたデザインが実装できます。

![](https://lh5.googleusercontent.com/yn-XejcPJ4Pvw1Asq6a3_y2Z3IQMwuTPP9RY5Nallta2rqYK7wGROlN-hShFzADfZCdKIaWk-Nmwhi0rPspzODa19TAeqhCEp1Y4Vu79bUT1mc5zB0-AhFW4xF56K6691mz4vxnqAbhFhwnFQGobSFweIWoSiZGKqVufcJyfoRPR0HsJK0pQvKtAlj0z5Q)

ここで、今回の「STUDIO演習」の前半が終了です！後半をお楽しみに！！

### おわりに

いかがでしたか？わからなかったところは、以前の記事に戻って復習してみましょう！

本記事とお手本サイトは、デザインをSTUDIOに実装する練習のために作られたものです。実際に「地域の教室」のホームページを制作する際は、「料金設定」や「レッスン風景（教室の雰囲気がわかるセクション）」などが必要になります。

たくさん練習をこなして、いろいろなデザインを実装できるようになりましょう！！


STUDIO脱初心者！WEBサイト制作演習【華道教室ホームページ】前編

本記事は、ノーコードWEBサイト制作ツール『STUDIO』を使ったホームページ制作演習の後編です。

**前編をまだお読みでない方はこちらからどうぞ→URL:**<https://implist.dev/entries/3b13983412c44555d892bf0c62e82b04>

今回トライするのは、以下のセクションです。

![](https://lh4.googleusercontent.com/41r6AnIgUI2oB2e9dlXv9sJuMlko2ibutTCOnWyWARv7YFmXDFsd7DXAxYnVBf8DhsBil81SJUp-ji3Vv7-PsQkTwsBmJmQyVDj33PpgQ_E_dSmVJCpSUmvhUk9SK6rIciW50UV_yP3C802kshT8kdrUDqCMn6Vt0RFi-IPt0cisW3OExQG8tMx1lDjqtQ)

※本演習のための架空の教室です

**サンプルページURL:** [**https://implist-training.studio.site**](https://implist-training.studio.site/)

前半同様、公開されたサイトを見ながら、STUDIOでの作り方をイメージしてみましょう。そして、作り方がパッと思いつかなかった部分は、解説を読みながら手を動かして練習していきましょう！

【今回の解説】

1. 文字と画像がふわっと出現するアニメーション
2. ギャラリー
3. アクセス（googleマップの入れ方）
4. フッター
5. 内部リンクの付け方
6. 公開前にすること

### STUDIO 文字と画像がふわっと出現するアニメーション

スクロールしていくと、画面の両サイドから文字と画像がふわっと出現してくるアニメーションです。この演出も「あるあるパターン」なので、ぜひマスターしましょう！

![](https://lh4.googleusercontent.com/VM9xgtBlHfcUshAvK_78Pt1gr8gSc-qgb5Q6olX8-EBvDZyYRynOs545X0gqiX3xzywW3JoqfqkHGcMceWqw07zEsB5BnbPN0GqXWkmYGHc0B2uvCgdy61_0FuImf5j9sq82Ap0EnTaq1wgoWM_5BFTBJrpWPeQktrBhElQIY7T5RUcLuqT30rxA-IFDEQ)

#### セクション全体のレイアウト

アニメーション設定の前に、まず、全体のレイアウトを組んでいきましょう。ボックスの配置（入れ子構造）は以下のようになっています。

![](https://lh5.googleusercontent.com/98dkLFLWy42o83D3rbFCj5teBdpMupOYibMzdArmPJJB9h2CKFztC-LZuj5ueVdtC2axy71ic_tb41dMRo6h03I5wRIVh6YylHBoXsf7gDDwKM6-EbhFKYU-606aXhQrQ7P1CLRV7yp5Rmk2OCM5FFfCNB0ftfeelavhGwGDJA2phV2p2bHV0dT8vNRYNg)

STUDIOに実装するときは、以下の順番でボックスを設置していきましょう。

※本記事内では、説明のため各ボックスに色を付けております。

1. このセクション全体のボックス（灰色）
2. 横並びのコンテンツが入る親ボックス（オレンジ）
3. テキストパートが入るボックス（青）
4. 画像ボックス（緑）

オレンジのボックスは、中に２つの子要素が入っていますね。これらを**「横並び」**かつ**「均等揃え（両端揃えでもOK）」**にするよう設定しておきます。  
**※子要素の配置は、その親要素（今回はオレンジのボックス）に対して設定します。**

つまずいてしまったら、ここで復習！  
**『STUDIO基本操作① ボックスモデルを制す者はSTUDIOを制す！？→**<https://implist.dev/entries/e3d8b5449404c6034a0d292d21e2d7a9>

青ボックスにテキストを、緑ボックスに画像を入れたら、次はアニメーションの設定です。

#### アニメーションの設定

今回は、ページをスクロールしてこのセクションに来ると、文字度画像がふわっと現れるようにしたいので、**「出現時」**を以下のように設定します。

1. アニメーションをつけたい要素を選択する
2. **「条件付きスタイル（画面右上）」**メニューから**「出現時」**を選択する
3. 画面上部のタブを**「モーション」**に切り替えて、数値を設定する

アニメーションの設定は、テキストパートの入ったボックス（青）と画像ボックス（緑）のそれぞれに対して行います。

![](https://lh5.googleusercontent.com/8OX3-Pem4EslEtWKI5prRuSI8xHygA3NtQ41p5dHOqF4nNg2Rwd8DssPiPk9lB68ePw2XGmCt2ILJrKEguDFsn8mbHT9R18AwxTiM01v1jHbeXLOim_DD87or0iaw0-mIiuTFvgqiVklm7I1z9ACSxNodKYMjFbap9lncIPKPwlmBdtmkfAwCLL8s5W1DQ)

「移動」の数値が「30px」の場合は右に30pxずれた場所から、「-30px」の場合は左に30pxずれた場所からの出現になります。これで要素が**左右からふわっと出現する**演出ができます。

※今回は読者がモーションをしっかり目で追えるように「遅延 600」としてありますが、実際のサイトでは、この数値はもう少し小さくするとよいでしょう（間が空きすぎるとユーザーに不安感を与えてしまいます）。

アニメーションは、ご自身で数値をいじってそれをプレビューで見ながら、数値とサイトの印象をその都度確認していきましょう！

### STUDIO ギャラリーセクション

ポートフォリオサイトにも欠かせない「ギャラリー（作品紹介）」のセクションを作っていきましょう。ここでのポイントは、**複数個のボックスの配置設定**と、**ホバーすると画像がちょっと大きくなる動作**の設定です。

![](https://lh5.googleusercontent.com/4VOeaSanEx0gPsaDQpEigNBQrGxYf9n12ObV6-EtyjJvqizGh16WKPAoEZufAD6e5QKcRVWDs1NsrL_3at8u-eS_ba2Cl3fvIenHB0-hnKO2p-bySzH_G9uAE2-gy-tShViWCUZPNU15KlY2gNsFB5OT7QlCE5MHXtRY5rZa6ebNg6G7oavkXm5_ABL4EA)

#### 複数ボックスの配置設定

今回の例のように、ひとつの作品がテンプレート化されたボックス（画像＋日付＋名前 など）に入っているときは、まずこのテンプレートを完成させます。

そして、このテンプレートを複製していきます。このとき、複製したい元の要素にマージンがついていると、このマージンも一緒にコピペされます。

※あとで親ボックスに「均等揃え」を設定して行間を整える場合は、マージンはゼロでもOKです。

![](https://lh3.googleusercontent.com/CefrIsHHPRqWTcCkh3XtVr7v9uXdhob6spQFIyekxxKvWKaaoGAgm1ze1VMMNfEZc7QuV64Xd4hJUuZ5mxmCHFSUdupRpFUzLuvz8-f1EfQaV8U8qkcr0rPim72TXelDjR7BnOr6xPat-Zx3B53orphi5_3-ompxpPV3budNNdCtPh_NlURGXb21CK0oxg)

テンプレート群の親要素を選択して、**全体のサイズ**および**子要素（=各テンプレート）の並べ方**を指定します。このとき、並べ方として**「折り返し表示」（ジグザグ矢印）**を指定しておくのがポイントです。

![](https://lh5.googleusercontent.com/ZNmXD7a_Aafkkxvu3txCc-7EXIDOj6VptZOENVCXAvW_Z0P2obtoqCcYiv242MvPIQu6vi046iSl_fmVgnmz0qqgJSuRNYMC0Laxyu-8eA1j9WGtCM51Km1LjxCbQAh4wD5xmBbyix0lDaPpwrmhPL7VO-2dYRLQUnGo9afTg0_t52qPVaStnCjjPYmp0w)

要素の並べ方についてはここで復習！  
**『STUDIO基本操作① ボックスモデルを制す者はSTUDIOを制す！？』→**<https://implist.dev/entries/e3d8b5449404c6034a0d292d21e2d7a9>

**One Point**  
「枠線」は部分的につけることが可能です。お手本のテンプレートでは、右側と下側のみに枠線をつけてアクセントにしています。

![](https://lh4.googleusercontent.com/zsmcgg53suWui3dleRt7u-B4GVw4RwnFb5gip9UMhy1jHRm0aTfo_iaFSVBhtFOOgA0B54TfBz9pvijfM6tQORMEl-UwHELPwTlMBoW8XIRZZEoCLcnls180VS_bbdR27YEhzZUb8HMoj0iCpVTmwE-TjXbi_J_TPJKYopLhWZbqqTjmbs-UMB7sAuhz3w)

#### ホバーすると画像がちょっと大きくなるアニメーション

ここでは、ある要素についてホバーする（カーソルを合わせる）と、その要素が拡大するようなアニメーションを設定します。

1. アニメーションをつけたい要素を選択する
2. **「条件付きスタイル（画面右上）」**メニューから**「ホバー」**を選択する
3. 画面上部のタブを**「モーション」**に切り替えて、数値を設定する

例として、真ん中の画像にアニメーションをつけてみます。**「ホバー時に、画像を1.2倍の大きさにする」**設定として、**「スケール」**をX, Yともに1.2としています。

![](https://lh5.googleusercontent.com/EMrWCh_3jNTqL7GbXwj7KDbnABAD1R4gF2rLhOYH-HTyG_POUwu9EufPZmw99pbzNdwuLn7vKQBJ2UXsIQvyK7BAOJvMDSyTP9Qq69rmOXGZ_IFGp1vraw593G3JTY6hz76z6JRwUJZMcZG0aNNYgBoseGtaYdVLZ5PEjPNVM7K8lcRMs3COrzHJ5UX-Tw)

**One Point**  
**「Shiftキー」**を押しながら要素を順次クリックしていくことで、**複数の要素を同時に選択する**ことができます。こうすることで、6枚の画像を同時に選択し、ホバーの設定を一回で行うことができます。

### STUDIO Googleマップの設置

本章では、STUDIOにGoogleマップを設置する方法を解説します。

![](https://lh6.googleusercontent.com/0rNXSVp0SVqeXBrSNQasFT2f8pjOve-zPx1-v6PGq1dJpE5l7kOgslfQHqw51sSuA-QAJ0iuo3mn8MsKqPq_XF7nf24kU3G7PldQDoqSXtboWZq3FvXyIraNQXPaaFVepYYUlXA6h1HDUOMmMXojtmx-Yd2WBJ7BK2ygsMVOR4PdA4yN2Sa8-8RR038n-A)

**STEP1\. Googleマップから載せたい場所の位置情報を取得する**  
Google マップからのiframe情報の取得は、以下のように行います。

1. Google マップを開き、該当する住所を検索する
2. **「共有」アイコン**をクリック
3. **「地図を埋め込む」**タブをクリック
4. **「HTMLをコピー」**をクリック

![](https://lh3.googleusercontent.com/7QNzkGDVCLZssQ0RmYvDraS0YGXbBxUZqb6QI06SmhORLxVa8NCgHoaBAE4goRreIi66eBSMh8xErJM8WtgNe8zQpvrV_bXs1ziaxHx5qVEBgaGsISIUzjnP2bowMLtft2LWswA0BczqdwYjtQXvPHa8g_P5tKOhWgI3jkgKAkUAwCaVxaVDrodKdRYRQA)

※上記は例として東京スカイツリーの住所を取得しています。

コピーしたiframeの情報は、いったんメモ帳などに貼り付けておきましょう。

**STEP2\. STUDIOにGoogleマップをセットする**  
STUDIOに戻って画面左の**メニューバー**を展開し、**「追加」タブ**の**「ボックス」**から**「Map」**を選択し、ドラッグ＆ドロップでMapを追加します。そして、挿入されたMap縦横のサイズを調整します（調整の仕方は、通常のボックスと同じです）。※デフォルトでは東京タワーのマップが表示されます。

![](https://lh6.googleusercontent.com/0ZB3OV5KIFxEshf7cwXp-NBvHWw6-uYUk49srgNMaf7qmghnNS4ysEqKyoSeithDXqKIfpufeClbq4Jj4XutpZRQ8b5b8DQSF3INetmpJ_T2a6uNqTd3xjoPPs_0Jn4NZjOq1rIOt_ZJDE_t7Ymjw4FIWFTifTsDcso8CMG4nOI4ZSdReS6_dcSClSlgVA)

**STEP3\. iframeを埋め込みコードとして貼り付ける**  
次は、マップが選択された状態で、画面右のメニューを展開します。この中の**「埋め込みコード」**の**iframe**を、デフォルト（東京タワーの住所）から実際に表示したい住所のコードに差し替えればOKです。

先程、Googleマップから取得してメモ帳に貼り付けたコードに差し替えてみましょう。新しいコードを貼り付けた後、Enterを押すと地図が更新されます。

![](https://lh4.googleusercontent.com/6kDPsUIPNRbDIfLmVOthfKAVFxTLEijiKDL_mbRe2xKa-JhLzZe3xuvPw2TR5JslOjCMu1TS_7uYw7qf2mPGm0H5jCU54AqmRKQiEf-fhGg_1_fwTkOQ2V1v3vYLqMkxg345SX1oRBNidVsJQsIIM3aULNhaJ5mVTjlzmDcyVOVkJseNxWt6IPYAd40vqw)

### STUDIO フッターを作る

本章では、WEBサイトの最終セクションであるフッター部分を作っていきます。

![](https://lh5.googleusercontent.com/898NCd-Cp5q3cn9A8nXraMhiCLt4lHAXwZDB3xqy-KHNzsNFGDoIkz2eFFuxY4DkWKgQjFQfGVjgRo7I8ZCAgzTQGE-aBwVhB8KxRaZLE0gsLLB_jsA8IAE_vd6M5d1YfzU9yE-8gFr8rTyouoGg1co5_BXiU4Cc0IhzgqILaFfuXcKFRwOc1cDR_Fi0IA)

本例では、サイト全体に統一感をもたせるために、トップページと同じ画像をフッターにも用いています。

ここでは、画像の**「明るさ」**を0.6として（明るさが 0だと元画像のまま、1だと真暗です）、白文字が浮き立つようにします。

黒背景に白文字を合わせた場合、文字がくっきり浮き立ちます。一方、グレーの背景に白い文字を合わせると、**文字を控えめに目立たせる**ことができます。

![](https://lh5.googleusercontent.com/qCZhVQioysKK7FujOSyONeja7CBHI5PRHYRmqFXg5CEH7sLlFdPSRedOsTs-zMEmvNMo8QLGeuDrlrEZM2_4JJRZPUjgj3lriHcg-xVbOf54hkmTRwtgEAtchghe_jKI_soIXtEAJ2CmLkdoCZWvYsh3hcKSiiX0a7BmgrHTG511y57KjgzuQQb5NoV5cw)

お手本通りに文字を入れていってもOKですが、ボックスを2つ横並べにして、**左側に「タイトル / 住所 / 連絡作先 etc…」、右側に「縦並びのメニュー」**というレイアウトもフッターあるあるです。 

**One Point**  
フッターは、**STUDIOのテンプレート（「追加」→「セクション」→「フッター」）**もありますので、これを利用することもできます。

![](https://lh5.googleusercontent.com/bLQqMxn3NTi8V0YVY-sT4TMUPFM-h9D5m-lmARyQr4DNKzF_tjkvx1AGZb39EBCweXHrtKy9isbb-Yb0xq-RZkWMFx1n_FNbSXKeB1pgtvmca0Tg5IJZZwRRVnFn5Y_pzI1jm_FA2bvIf7wAMiT_d_-DLQea4Y-_oYe1oS9z8GOUi8VY5YC9YfWCtxIpxg)

### STUDIO 内部リンクの設定

全てのセクションができたところで、トップページのメニューに（フッターにもメニューを付ける場合はフッターも）内部リンクをつけていきます。

内部リンクを設定する前の準備として、各リンク先にIDをつけていきます。

※「メニュー」→「各セクションへのリンク」をつけるため、各セクションごとに（デザインにかかわらず）親ボックスを設けておくと便利です。この「各セクションの親ボックス」にIDを振っていきます。

![](https://lh4.googleusercontent.com/kOqA7KAsy0RUzTESMyEVIiWtjCmKT-w4BcHNfBBFVPoAMlqEg6-tlnNcRjcLIhPhIS6eZkvi4GV1V6NyhNkOwMn4x6mqaKx4aR9bbupIlptc6g4Hk3SB-chilmFLvA36erku2U-1FKCsjvLlLrMCSsklFRI7nITgC0m_ayW2hA4yQV_5EZb3TGeGrwx51g)

各セクションの親ボックスに、以下のようにIDを割り振ってみましょう。  
**※IDには頭に「#」を付けるのが決まりです。**

* トップページ→ID: #top
* 教室紹介→ID: #introduction
* 講師→ ID: #teachers
* 作品紹介→ ID: #gallery
* アクセス→ ID: #access

![](https://lh6.googleusercontent.com/3NW9o1m06ElDt_3HGT3ukry3v_OJSz7dLOYK0li23b1QOOAEMxsNIgbvW2f837gOC0E69P2g6xthL7Pd3iYvzLtOTOpGgYBCmmgvIFVwsNezjmgR_NgutAZ2AIxM7s1h5iNWeE7fDmCA9blAUjlQeM5f3N21e8FvyvxVqIDXug_j-h5O5FPtWX8pKXsZWA)

IDを設定すると、リンク先としての選択肢に「#top, #introduction…」が、現れるようになります。「華道教室」を#topに、あとは各メニューに対応するIDを選択肢から設定していけばOKです。

### STUDIO 公開前にSEO対策を行う

WEBサイトを公開する前に、「ページ設定（画面右上）」を入力しましょう。この項目をしっかり埋めることで、適切なワードで検索・表示されるされるようになります。

![](https://lh3.googleusercontent.com/_sH3jEJAxVi991yzTe447OlYMfHIhtM_KurrUDqcEjhdGeDqOkbbvfvVwbTk40F1CYOT6VExUdBN8l23LOQPaKeSk88aRSl-GLc3DeZWSB1iuAGPmk_HuNZXtSHCpBIFu5yLof4arE2IBOZMG18MtVEfZ007k02bb594h1FCmAbOtdEyO8vQ39rAub3SeA)

このほか、トップページのタイトルを「h1」に指定、各セクションのタイトルを「h2」に指定するなど、基本的なSEO対策はしっかり行いましょう。

参考：**『STUDIOで作るWebサイト☆必見SEO対策４選』**→<https://implist.dev/entries/3f73389da0b66722bddc8599f4f5528f>

また、今回は省略しますが、サイト全体をレスポンシブ対応にすることもお忘れなく！

参考：**『STUDIOのレスポンシブデザインで押さえておきたい技３選』**  
→<https://implist.dev/entries/da28fc72a916af98bd8e4d25438de514>

サイトを公開するときは、**「全体設定」ページ**から**「公開設定」**をクリックし、**URLを決めて入力すると（https://ここの文字列を決める.studio.site）**、**「公開」ボタン**が押せるようになります。

![](https://lh3.googleusercontent.com/bn_3MoC3QprN-frrQkJ0F1CzFqSZHt8NakkzGPW0U6zaks-7KAGhDfHj-b2XX66F3aTO_kqGs0cF6xEgQZeSl9HqGk_qJZyBegs_fmuDsP4fZIf1ojBikeQBFOKZn0z286Zx_pERQzFOEbVQsRZgbc99sP2rOeaYEl1RrVJbK6JYhtEok-GA1_0np2UMOQ)

### おわりに

いかがでしたか？前編〜後編を通してお読みいただくと、WEBサイトを制作する流れがつかめると思います。

前編・後編をざっと読んでおおまかな流れをつかみ、細かいテクニックは各記事でじっくり学んでいきましょう。慣れれば、かなりのハイスピードでひとつのサイトが完成します。

頑張っていきましょう！


STUDIO脱初心者！WEBサイト制作演習【華道教室ホームページ】後編

本記事では、ノーコードWEBサイト制作ツール「STUDIO」で、ご自身のサイトを独自ドメインで公開する方法を解説します。

ドメインの設定やサイト公開の流れはだいたい知っているという方は、 **「準備」** から **「簡単4ステップ」** の順に読み進めてください。

サイトの公開は初めてという方は、「簡単4ステップ」で流れをつかんだあとに、その次の章の **「解説＋α」** を読むと、それぞれの設定の意味が理解でき、サイト公開の仕組みがわかるようになっています。

### STUDIO 独自ドメイン設定【準備】

STUDIOで独自ドメインの設定をする前に、2つほど準備が必要です。

**準備その１ 有料プランへのアップグレード**

STUDIOで作ったサイトを独自ドメインで公開するには、 **Starter以上のプラン** にアップグレードする必要があります。プランのアップグレードは「プラン&お支払い」からできます。

Starter、CMS、Buisinessいずれのプランでも独自ドメインを使うことができます。

![](https://lh4.googleusercontent.com/NvZALzK1hyuAkFLFx1KGOm4iZ3BSBYXE68f7gQ6gGXelWAKc5XRW7fAWQXfHbKjhSDSIyaoUUlwFRCKP_r6GDpOE-WcdYB3MosOxx0JtHr2-g5GpEBVDDctzolFrdwUDsVBR0JNaH232wCFqUomWFhyXPK_D286jyCuNot3IpyFgpGBrS7EiwPKub9x8QA)

※ただし、Starterプランでは、無料で使えていた機能の全てがそのまま使えるわけではないことに注意しましょう。Starterプランでは、使用可能な機能が拡張する代わりにCMSが使えなくなります。

**準備その2 ドメインの取得**

STUDIO内での設定の前に、あらかじめ外部のサービスからドメインを購入する必要があります。  
※STUDIOではドメインの販売・管理サービスは行っておりません。

**ドメインを取得できる主なサイト**

* ムームードメイン  
<https://muumuu-domain.com/>
* お名前.com  
<https://www.onamae.com/>
* Xserverドメイン（エックスサーバードメイン）  
<https://www.xdomain.ne.jp/>
* Google Domains  
<https://domains.google/intl/ja%5Fjp/>
* さくらのドメイン  
<https://domain.sakura.ad.jp/>

### STUDIO 独自ドメイン設定【簡単4ステップ】

前章で解説した準備が整いましたら、次はいよいよSTUDIOで制作したサイトに独自ドメインを設定して公開しましょう！

**ステップ１ ドメイン登録**  
公開したいプロジェクトを開き、 **「公開設定」** をクリックします。

![](https://lh5.googleusercontent.com/DZ834NFb2l6G8PI3TGkHyqtmqcORWoEooY5zqYMqJ-FhC4Vg1g3-39aXrCBeEpAaI_9gXGOgioTOzyIQuFIlGKujpkj_LAZnjdzoZ6hcoxchMK6IYP6hmnydbXv-ahYH-uoWv8cEZMwJMp6mHvi3_kMUOKjKqJXbBUyPT44JDqU3r02bpL_XdfqbeOxC3A)

すると、以下の画面に移りますので **「独自ドメイン設定」** をクリックします。なお、独自ドメインの設定が完了した後でも、STUDIOドメインに変更することも可能です。

![](https://lh5.googleusercontent.com/N8XeMOL-Z0PeJIMwWUtetseqDlLsjSdkTKmkRfph5-g_Q_td158ZsMmPvY0FxDSdP6gYk5Oz8Qg9ANRpLPvmEVCYg5fIq4GnKtl-paroxoRMLJrEK4aRIgknJ-Nx_B7Vpv4mDUXjfe1KiHeOE0J0aWVIMdb86T3lR5CrN_KfRq20F89oVq77fOXTmAivPA)

「接続したいドメインを入力して下さい」と出ますので、取得したドメインを入力し、OKをクリックします。

![](https://lh6.googleusercontent.com/MA2BOENNY64ixLQjixgGhtdhdaMzf4Lg4GLRSEWDgixJWMRMTrC89njUNtk5joAM7fDpJ0u740t1_zIV38fK-TcFS01YyXe56t-HXRiVJXRStgmVIH-wW-0uWPJXFMiWZc9OBoEpZwmek6_92TjMFMTfy4azK194spQL3DWQb1OT8_BQpXdYJ_DFaZKp3Q)

**ステップ２ DNSレコード設定**  
ドメイン登録が完了すると、DNSレコード設定の画面に移ります。ここで現れた **レコード（A レコード）** をコピーしておきましょう。

![](https://lh5.googleusercontent.com/3eHzmQN7kI_x_AeOYeLhBNYz9ft_tdf4--Gt3IdMp_5EbGoh9wNjF_dMmmqbqRM6a7gGEsP4MO0clVs8xl8_65eOMQXWb2esNWUDBJJW9varOSOx_8Iy-Fs7i7nssM23DWivEPRacli8lSJKxPlek7CCWt3t5Nwc4Yw9oiM1gfJr7OBhvIrvlu5fBfN7Sw)

**注意！）ここからは、ドメインを取得したサイトでの作業になります。**  
ドメインを取得したサイト（ムームードメインなど）を開き、DNS設定画面での入力作業を行います。

なお、ムームドメインでAレコードを設定する方法については、こちらの記事で詳しく解説しています。  
**ムームードメインで「独自ドメインのAレコード」を設定する方法！**  
URL→<https://implist.dev/entries/1b3eaa01b0c685468330914c59b822f1>

ムームードメインの場合  
種別：A  
内容：34.111.141.225

※Google Domainsの場合は「タイプ：A、データ：34.111.141.225」となるなど、ドメイン取得先のサイトによって表記が異なる場合があります。

**DNS設定が完了したら、STUDIOに戻ります。**  
STUDIOに戻って、先程の画面の「次へ」をクリックしましょう。

**ステップ３ ドメインの接続確認**  
ドメインの接続確認は自動で行われますので、特に操作をする必要はありません。接続が確認されると、自動的に **「TLS証明書の発行」** に移行します。

**ステップ４ TLS証明書発行**  
この工程も自動で進むため、特別な操作はいりません。

![](https://lh5.googleusercontent.com/XXoSLzN0oGD9JRI2XnTd9dn7A6cJGtmJJ0uaW-nlnfcFqOlNrdKMhC8mAyB7hJk8dEBh6Pt_jhVuGnN_e4B3KUsOlYGlR7Yb9krAGrBFwT4VuF1Fp67PEZTZKcvmVYoPE1eYAPzAtUeXnb7qB4wH5bKJAj04sYKD84Whb0AU-cVLd_-1cDZw0tE1Oe8Xzg)

TLS証明書の発行には、時間がかかる場合があります。

※Implist-site.comで独自ドメインを設定したときは、一晩このままにしておいたところ、翌日には完了していました。

TLS証明書の発行が完了すると、以下のような画面になります。ただし、自動で公開されるわけではありませんので、サイトを公開するときは **「公開」** をクリックしましょう。

このとき、画面右下の **「STUDIOのバナーを非表示」** を選択して、WEBサイト上に現れるSTUDIOの宣伝バナーを非表示設定にすることができます。

![](https://lh5.googleusercontent.com/FQ9FRj_NbU_I1Fa1LtZge4LylIBDoVEtOcYM9TkntCucuowd_vcfKaG623zUzdcayuBUSkvYlCUhz-wPVRkG16eCw4SZaivfQy5V5NxhMX-fbmxvJHx--_FBo9RiCTNngLaCQD9Q1665tzLSJ8q4lrFu3na4pSDCwfKs1vQrKh_NWlCF_5w6gi_LPgvUFg)

サイトが公開されると以下の画面が表示されます。

![](https://lh5.googleusercontent.com/rY2q9hSohT31Puer9VTDeUfsLonKVN4vJHRSJUr9C-LbGB8kr-Nq_Wkkb163mgDprhN9e8w9ZOaneHis5GcIwiWZEn3cZNL1fM-vAZhHkLBTPu76WjFfKDZamZal7sByus8dQ4S0AupIt3o-EhLDJZJRl3JnKYdijqHzkickEpHrxe_IttsN-JMzK8Lygg)

### STUDIO 独自ドメイン設定【解説＋α】

ここまでは、サイト公開の流れをある程度知っている経験者の方を対象に、「STUDIOではどう設定するのか」を解説してきました。

未経験の方も、ざっくりした流れは掴めたかと思います。しかし、「そもそもドメインって何？」「AレコードのAは何を表しているの？」「TLS証明なんて聞いたこともない…」というユーザーも少なくないかと思います。

よくわからないものを設定するのは不安ですよね。…というわけで、本章では独自ドメイン設定に関してもう少し詳しく解説していきます。

#### そもそもドメインって何？

ドメインとは、各WEBサイトのインターネット上の住所のことです。「□□□.com」「□□□.co.jp」「□□□.jp」などが有名ですね。

しかし、本来は各WEBサイトのインターネット上の場所というのは **IPアドレス** といって「12.345.678.90」のような数字の組み合わせて表されます。ですが、このような羅列は人間には覚えにくくわかりづらいですよね…。

そこで、こういった数字の羅列で表される「WEBサイトの場所」を人間にわかりやすく「住所化」したものがドメインです。

ドメインとIPアドレスの関係は、地図上の座標と住所に例えられます。

![](https://lh6.googleusercontent.com/huR5DzYTRaNbLIhnRwBkqLRdXFMsUKx7ty_tcS_eBrGZKg9KRT_cuk2cOcbW5sDP2Iv8UL4FqDhwFgz09WpHWM32fIrruXqYj_NPEApHnkrN6aO2U5rE2_AidVlq6AJ4Ey109OKhgPZbXam4qmXfPCrtShx683YfqczSDzb6b674eQMDNnsc6-4hlTCiQQ)

インターネット上では、この座標にあたる数字がIPアドレス、住所がドメインにあたります。

#### DNS・DNSレコードって何？

「DNSは何をするものか？」という疑問については、以下の記事で図解でわかりやすく説明しています。

**【DNSの仕組み】を図解でわかりやすく解説してみる。名前解決はどういう流れで行われているのか？**  
URL → <https://www.implist.dev/entries/b72f67157565e2311b49aabf48482ad1>

> 引用
> 
> DNSは一言でいうと「ドメイン」と「IPアドレス」を対応付けるためのものです。
> 
> ドメインをブラウザに入力してサイトにアクセスできるのは、ドメインとIPアドレスの対応をDNSが持っていて、DNSがドメインに対応するIPを返し、そのIPアドレスが示すサーバーにアクセスしているからです。
> 
> ドメイン、IPアドレスというのは、
> 
> https://www.example.com/ このExampleサイトを例に取ると、
> 
> * ドメインは「www.example.com」
> * IPアドレスは「93.184.216.3」
> 
> になり、この2つの対応付けがDNSにて行われています。
> 
> DNSは「Domain Name System」の略で、ドメイン名をIPアドレスと対応付けるためのものになります。  
>  
> **【DNSの仕組み】を図解でわかりやすく解説してみる。名前解決はどういう流れで行われているのか？より**

**DNSが持っている「ドメインとIPアドレスの対応表」のようなものが「DNSレコード」** と呼ばれるものです。

#### Aレコードって何？

独自ドメインを設定する過程で **「Aレコード」** というものが出てきましたね。ここで混乱した方も多いのではないでしょうか。

![](https://lh4.googleusercontent.com/_WHtYYZsSK9noBGWXrbwlhTBDwrXWz6HBtuNNjGXbPUKtj2e1JiHr2UhiW2mVnVTBkcREuaDyrGLTvkFStnoL0D-J713q1Dms-MDrGUSwjdd8gRZ7CNYVB45DFt9voyDCwFbO2_nNpiQFdnPbLVOieUQP3xg6ZXXx1cUI-VE408PxAvxve8vVPZ7-GImdg)

Aレコードとは、 **DNSレコードのうち「ドメイン名とIPアドレスを結びつける」** ためのものです。AレコードのAはAdressに由来します。

「◯◯レコード」と呼ばれるものの中には、Aレコードの他に、AAAAレコード、MXレコード、CNAMEレコード…などがあります。例えば、MXレコード（Mail Exchangeレコード）は、Eメールを特定のメールサーバに配信するために必要なレコードです。

このように、「A」や「MX」「CMAME」といった種別（タイプ）によって、レコードの役割（目的）を区別しています。

**おまけ情報**  
新たに登録したドメインとIPアドレスの紐付けが正常にできているか、また、DNSサーバーの設定が有効であるかを確認するために、以下のようなサービスが利用できます（外部サイト）。

DNSレコード確認：<https://rakko.tools/tools/18/>

![](https://lh4.googleusercontent.com/tOn5OXpveJgTaHdGOzNQs3YWqxA5_wySnK3AO19YyOpUCLIw1Xjs4TkdJ6xy4snhe4PFoYCLd7Fhr5BDwDKEUxFtAN9mkI9Vpd4BpUjkigcC71lQOIQPjHX2Xwn4vvuej-w5J0pCq0yn2-aIz6_i9TRWbmxWKirDzDrs722UDS8Sb2Dp243zUB7wnpzl0Q)

#### TLS証明って何？

**「TLS」** は初めて聞いたけれど、 **「SSL」** なら聞いたことがあるぞ…という方もいらっしゃるかと思います。 **SSL（Secure Sockets Layer）** とは、インターネット上で通信される内容を暗号化することで、外部からの情報盗難を防ぐセキュリティプロトコルです。

**TLS（Transport Layer Security）** は、簡単にいうと、SSLの脆弱性などの問題を改善し、より **安全性の高いシステムにバージョンアップしたもの** です。ですので、役割としては **SSL＝TLS** と考えて問題ありません。

SSL/TLS化されているWEBサイトは「https://〜」、されていないサイトは「http://〜」から始まります。SSL化されていないサイトに接続しようとすると、このように「保護されていない通信」といった警告が現れます。

![](https://lh6.googleusercontent.com/63mCyOQ4KjT5368JiG6yedbs3Rf6nn-DM_IjmeZAcSTnRULFJT4gkwGfjnLY2JDAq9DXybbPgcUtw9RywIMW1JC4u5AsoBrKQbmXIyG5o8QteqduOS2S--WSil_rJicFqijoT7mLypHLZLR24StDK4bmWk18dGGHEA_WKToCCYGlK8mO1ccLxPqIEe1l1w)

**TLS証明書とは、WEBサイトの本人確認証** のようなものです。接続しようとしているサイトが偽サイト（例えば個人情報を盗み取ろうとしている）ではなく、実在する正規のサイトであることを証明するためのものです。

個人や組織が、作成したWEBサイトのTSL証明書発行を申請すると、「認証局」がドメインや申請者の情報を調査します。認証されると、そのWEBサイトはいわば身分証をもった状態になります。これによって、信頼できるところ（認証局）から「このサイトは正しく通信を暗号化」していると証明されて、ユーザーが該当のサイトを信頼して使えるようになります。

「https://〜」から始まるサイトでも、この証明書に問題がある場合（暗号化はされているけれど証明書が正しくない）、訪問者がサイトを開こうとすると **「この接続ではプライバシーが保護されません」といった警告** が現れます。

### おわりに

WordPressなどでサイトを公開したことがある方は、 **「ドメインとセットでサーバーの契約はいらないの？」** と思ったかもしれません。これについて、SUTIOでサイトを公開する場合は、（どのプランでも）STUDIO側でサーバーは提供されるため、個人でのサーバー契約は必要ありません。

しかし、STUDIOではメールサービスの提供はしていないので、独自ドメインのメールを使用したい場合は気をつけましょう。 **「ムームードメイン」＋「ムームーメール」** など、 **サーバー契約をしなくても独自ドメインのメールを使えるサービス** もありますので、そのあたりも考慮してドメイン取得先を選ぶと良いでしょう。

WEBサイトの公開はいろいろ複雑な仕組みによって成り立っており、最初は混乱することも多いかもしれませんが、実践しながら徐々に理解していきましょう。


STUDIO  独自ドメインでWEBサイトを公開しよう☆簡単４ステップ！

本記事ではFigmaのアカウント作成と初期設定について解説していきます。
まずは、こちらの公式サイトにアクセスしましょう。

日本語版　[https://www.figma.com/ja/](https://www.figma.com/ja/)（※日本語版は2022年にリリースされました！）

英語版　　[https://www.figma.com/](https://www.figma.com/ja/)

### Figmaアカウントの作成
Figma公式サイトにアクセスすると、次のようなページが現れます。アカウントを作成するには、「Figmaを無料で体験する」または「サインアップ」のどちらかをクリックしましょう（どちらのボタンをクリックしても、同じページに遷移します）。
![figma_サインアップ](//images.ctfassets.net/2kcyx6q7ww5g/64Eech2YM1QHWkJNiApi0c/ddeaa85c85ea1e0eb6d7ede7fe9a3c3d/figma______________________.png)

次の画面では、「Googleで続行」または「メールアドレス＆パスワード」の設定でアカウントが作成されます。
![Figma_アカウント登録](//images.ctfassets.net/2kcyx6q7ww5g/7IyibY2EF9USnl7AcIaEd/5739a9c255f290af496065cce04a0747/____________________________2023-02-09_0.02.13.png)

__「Googleで続行」場合__

「Googleで続行」をクリックします。アカウント（gmailアドレス）が複数ある場合は、それらの選択肢が現れますので、いずれか1つを選びましょう。アカウントを選択すると、そのgoogleアカウントでfigmaにログインすることになります。

__「メールアドレス＆パスワード」の場合__

メールアドレスとパスワードを入力します（パスワード確認用の入力欄はありませんので慎重に入力しましょう）。すると登録したメールアドレスにメールが届きますので、「メールを確認する」ボタンをクリックします。
![Figma_メールアドレスを確認する](//images.ctfassets.net/2kcyx6q7ww5g/5TlCwgPFHl7AiTCCwWdkDw/7b71175a299a37f05d1f0e3c5ccf5a9e/____________________________2023-02-09_0.02.45.png)

※元が海外のサイトなので、たまに日本語に違和感を覚えることもありますが特に心配入りません。

「Googleアカウント」もしくは「メールアドレス＆パスワード」を登録すると、次の画面に遷移します。入力欄を埋め、チェックボックスを確認しましょう。
![Figma_自分の情報の入力](//images.ctfassets.net/2kcyx6q7ww5g/5ZSAjWopAsWNSSz1uPvfe1/6ac4cbc5f2c162f00b0bffb161db614e/____________________________2023-02-09_0.04.02.png)

1. 名前の入力　※あとから変更できます
2. 「どのような仕事ですか？」に選択肢で回答
3. 「figmaの使用目的」に選択肢で回答
4. メールによる「お知らせ」を受け取るかどうかに回答（受け取りたくない場合はチェックを外す）。

全てに回答し、「アカウントを作成」をクリックすれば完了です。
※選択肢の順番は画像と異なる場合もありますが、選択肢の内容は同じです。

アカウントを作成するとすぐに画面が移動し、初期設定を求められます。矢継ぎ早に選択肢が出てくるので少々戸惑うかもしれませんが、焦らず読み進めてくださいね(^^;)。

### Figma初期設定
アカウントを作成するとすぐに、以下の画面が現れ、「チーム名」を入力するよう求められます。
![Figma_チーム名を決める](//images.ctfassets.net/2kcyx6q7ww5g/ucmYiDtxxRlraNEKC6yBk/aad92dd517f976afd81bc2eafc2464e8/____________________________2023-02-09_0.14.16.png)

特に共同で製作するメンバーがいない場合は、「後で」をクリックしましょう。チームおよびチーム名は後でも決められますし、変更もできます（後で決める方法は、追って解説します）。

次は、「チームのプランを選んでください」と表示されます。この料金プランも、後で変更できますので、とりあえず無料の「スタータープラン」を選択しておきましょう。
![Figma_チームのプラン](//images.ctfassets.net/2kcyx6q7ww5g/34wsFhruHrtaCwumhDGOAQ/16712eb6d2e9443c6c3c40d35bb60e7b/____________________________2023-02-09_0.14.26.png)

プランの選択が終わると、「まずどちらの作業を行いますか？」と訊かれます。どちらを選択しても、「Figma↔︎FigJam」は簡単に行き来できますので心配ありません。
![Figma_まずどちらの作業を行いますか？](//images.ctfassets.net/2kcyx6q7ww5g/4WJWq5fwB6UCkxeNfT3cgI/74f4275db4f5886aa13f11d47f5dd9d9/____________________________2023-02-09_0.14.33.png)

迷ったらとりあえず「テンプレートを使用しない」でOKです。ちなみに、「テンプレートを使用しない」を選択すると、ホーム画面に移動します。
![Figma_ホーム画面](//images.ctfassets.net/2kcyx6q7ww5g/1daxVI0CtrZCpqZfj3zzuQ/68522ca81ebd63a50b3c40da6994bb24/____________________________2023-02-09_0.14.50.png)

…とはいえ、一応、両方の選択肢を見ておきましょう。

__「Figmaでデザイン」を選択した場合__

「Figmaでデザイン」を選択した場合は、さらにテンプレートの選択を求められます。
![Figma_Figmaでデザイン_テンプレート選択](//images.ctfassets.net/2kcyx6q7ww5g/6JcjMNerF0PxZXXvq5Zfw8/a270b75647acc9eccd933768e2549580/____________________________2023-02-09_0.14.39.png)

「iPhone」や「デスクトップ」といった選択肢のうちどれかしらを選ぶと、選んだサイズの「フレーム」（キャンバス、アートボード的なもの）を自動で用意してくれます。これも、後でいくらでも好きなサイズの「フレーム」を作ったり変更したりできますので、悩んで決める必要はありません。
![Figma_Figmaでデザイン_iPhone4フレーム](//images.ctfassets.net/2kcyx6q7ww5g/3R5OQB8WtD4rj7CfIkuth8/6c45984f3393643e1cfbb5351874390b/____________________________2023-02-09_0.15.02.png)

__「FigJamのホワイトボード」を選択した場合__

「FigJamのホワイトボード」を選択すると、ホワイトボード画面が現れます。この画面で、アイディアや工程表の整理・共有など、様々なことができます。
![Figma_Figamでデザイン](//images.ctfassets.net/2kcyx6q7ww5g/BrvChVIEC0xdWsZkLf9oR/7e9764918040ac582c79e26603849cbe/____________________________2023-02-09_0.15.11.png)

なお、「Figmaでデザイン」と「FigJamのホワイトボード」を行き来するには、まず左上のFigmaアイコンをクリックして「ファイルに戻る」でホーム画面に行き、そこから「デザインファイルを新規作成」or「FigJamファイルを新規作成」を選択しましょう。
![Figma_デザインとホワイトボードの行き来](//images.ctfassets.net/2kcyx6q7ww5g/6LDjlCIsQtYiDdTZVAymJs/ada60888e1f98761638e1e1083f4a324/____________________________2023-02-09_0.15.19.png)

※デスクトップアプリをお使いの場合は、「ホームアイコン」からホーム画面に移動します。

### デスクトップアプリのダウンロード
Figmaはブラウザで使用できるツールですが、デスクトップアプリもあります。
こちらの公式サイトからダウンロードしましょう。
https://www.figma.com/downloads/

![Figma_デスクトップアプリ](//images.ctfassets.net/2kcyx6q7ww5g/3i2jO9y32JD8qjoHIEANj5/93ec1d6ef653cb9c42d12727a1c26ea1/____________________________2023-02-09_22.33.48.png)

デスクトップアプリは、Mac用とWindows用があります。お使いのPCに合わせてダウンロードしましょう。ダウンロードは、「Desktop app for macOS（またはWindows）」をクリックするとすぐに始まります。

ONE POINT

デスクトップアプリでFigmaを開いている場合、Figmaのホーム画面へ戻る方法は「ホームアイコン」のクリックです（Figmaアイコン➞「ホームへ戻る」ではない）。
![Figma_デスクトップアプリ_ホームへ](//images.ctfassets.net/2kcyx6q7ww5g/3d2RSf4MXH83y28rwZIZiF/932b9e83cb97782faa13e93e43bd96af/____________________________2023-02-09_22.47.09.png)

### 初期設定の変更
ここまで、初期設定を行う中で、「後で変更可能だから」と言う理由で飛ばしたり、適当に入力した部分もありましたね。この章では、それら「後回し」にした部分をゆっくり決めていきましょう。

#### 名前・言語の設定
名前（表示名）や言語は、以下の方法で設定します。

1. ホーム画面右上のアカウントアイコンをクリックする
2. 「設定」をクリックする
3. 「名前の変更」から名前を、「言語の変更」から言語を設定する

![Figma_名前・言語の設定](//images.ctfassets.net/2kcyx6q7ww5g/1pDlqY4pYmV6BkTH0UnbCP/2e16736fb0bc932d59481b32f25c9a3a/____________________________2023-02-09_23.48.52_3.png)

おまけ情報

設定画面の「名前」・「言語」の下に「テーマ」があります。「テーマ」では、画面の「ライトモード」or「ダークモード」が選択できます。

#### プランの設定
プラン（料金）を変更する場合は、ホーム画面左の「プランを表示」をクリックしてください。プラン表とアップグレードへの案内が表示されます。
![Figma_プランの設定](//images.ctfassets.net/2kcyx6q7ww5g/72pKUL60q0EnrX7zbtHUZF/2ab265b9cd261e7a223504d3792db5d4/____________________________2023-02-10_0.03.41_2.png)

#### チーム名の設定
チームに関する設定を行うには、ホーム画面左に表示されているチーム名をクリックしましょう。チーム名をクリックすると、チームに関する設定画面が開きます。

※画像の例では「Team Implist」というチーム名になっています。最初にチーム名を設定しないと、「◯○（名前）’s team」といった表示なっています。 

この設定画面には、「プロジェクト」「メンバー」「設定」という表示があります。このうち「設定」を選択すると以下のように表示されます。

![Figma_チームの編集](//images.ctfassets.net/2kcyx6q7ww5g/3Z8pq7SFrtc6rkN4xhLhNm/c062f2c38923cc1cbbb19e3524f81fb5/____________________________2023-02-10_0.15.00.png)

一番上の「チーム名を変更」から、チーム名を変更できます。メンバーが増えたりしたときには、もっと込み入った設定もできますが、それらは追って解説していきます。

それでは、初期設定お疲れ様でした！
次回から、いよいよFigmaのデザインツールを使っていきましょう！

Figmaアカウント作成と初期設定を丁寧に解説！

本記事では、Figmaホーム画面から行うアカウントの管理（追加・切り替え・削除）と、ファイルの管理について詳しく解説していきます。

アカウントが登録されると表示されるこちらのホーム画面…このシンプルすぎる(?)画面に慣れるまでは、「何がどこにあるか」ちょっと戸惑うところですね。
![Figmaホーム画面](//images.ctfassets.net/2kcyx6q7ww5g/5tB3dMGWg0zuQK3AD3HW1f/a06482b94ea8e2f892710091db91809a/Figma_______________.png)

毎回ログインするとこの画面が現れるので、本記事を読んで使い方をマスターしてしまいましょう！

…ところで、Figmaのアカウントはお持ちでしょうか？まだの方は、こちらの記事で丁寧に解説しております。ぜひ、参考にしてくださいね(^^)

[『Figmaアカウント作成と初期設定を丁寧に解説！』](https://implist.dev/entries/figma-how-to-create-account-initial-setting)

__ONE POINT__

画面中央の一番目立つところに配置されているのは、FigJamのテンプレートです。FigJamをしばらく使用する予定がない場合は、右上のバツ印から非表示にしておきましょう。

![FIgJamテンプレート紹介](//images.ctfassets.net/2kcyx6q7ww5g/3f4edGjXwM68wBm5Pjqg4S/71de4990a56c46f5ba559546d2ad3ff2/FIgJam___________________________.png)

なお、FigJamのテンプレート一覧は、「FigJamファイルを新規作成」→「（画面左）その他のテンプレート」から呼び出せます。

### Figma複数アカウント管理（追加・切り替え・削除）
Figmaでは、複数のアカウントを持つことが可能です。ここでは、複数のアカウントを持つ場合のアカウント管理方法について解説します。

#### Figmaアカウントの追加
アカウントを追加するには、以下の順にクリックします。

1. 「アカウントアイコン（ホーム画面右上）」
2. 「アカウントを切り替える」
3. 「アカウントの追加」

すると、アカウント登録画面が現れますので、こちらから新たなアカウントを追加できます。

![Figma アカウントの追加](//images.ctfassets.net/2kcyx6q7ww5g/8oOjJFbbGISOMJuLLSSur/fbba36ba3d22e65f5c869938afcd4c0e/Figma_________________________.png)

#### Figmaアカウントの切り替え
アカウントの切り替えには、２つの方法があります。

一つ目は、先ほどの「アカウントの追加」と同じ画面左上のアカウントアイコンから行う方法です。

1. 「アカウントアイコン（ホーム画面右上）」をクリック
2. 「アカウントを切り替える」をクリック

登録中のメールアドレスを選択すると、アカウントが切り替わります。
なお「チェックマーク」が入っているメールアドレスが、現在使用中のアカウントです。

![Fimga アカウント切り替え](//images.ctfassets.net/2kcyx6q7ww5g/duo9Sp4G7xOiyjM6GR6Ld/3c9b3525de8e52a6a2d09df019bf8a8a/Fimga____________________________.png)

二つ目は、画面左上のアカウント情報から切り替えを行う方法です。

画面左上の「ログイン名・メールアドレス」をクリックすると、プルダウンメニューが開き、登録済のメールアドレスとアカウント名が表示されます。切り替えたいアカウントをクリックすると、アカウントが切り替わります。

なお、こちらも「チェックマーク」が入っているアカウント名が、現在ログイン中のアカウントです。

#### Figmaアカウントの削除
Figmaアカウントの削除は、以下の方法で行います。

1. （アカウントが複数ある場合）削除したいアカウントに切り替える
2.  ホーム画面右上の「アカウントアイコン」から「設定」をクリック
3. 設定メニューを一番下までスクロールする
4. 「アカウント削除」をクリック
5. 案内にしたがってアカウントを削除する

![Figma アカウント 設定](//images.ctfassets.net/2kcyx6q7ww5g/3K1lpXrKOgg2HXhvOMDRmg/8839328fb0bbcafac4ffff2ff019eee1/Figma_______________________.png)

![Figma アカウント削除1](//images.ctfassets.net/2kcyx6q7ww5g/4EqkPhMHj7xXC5iimfn372/28d8c294da8b634a1f594700f5d5000c/Figma______________________1.png)

「アカウントを削除」の文字をクリックすると、すぐにFigmaアカウントが削除されるわけではありません。次の画面の入力欄に、「自分のアカウントを削除する」と入力の上で「アカウントを削除」ボタンをクリックすると、アカウントが削除されます。

![Figma アカウント削除2](//images.ctfassets.net/2kcyx6q7ww5g/3CKplcFpRfitRhQwmjKmrd/806e577bd2c40099df7bd4891288d370/Figma______________________2.png)

### Figmaのファイル管理
Figmaの無料プランでアカウントを作成した際、「下書きは無制限、ファイルは３つまで」という表記に、ちょっと混乱しませんでしたか？…これは、「下書き用ファイルは無制限、プロジェクト内のファイルは３つまで」という意味です。

__ONE POINTファイルとは?__ 

Figmaのファイルには「デザインファイル」と「FigJamファイル」の２種類があり、デザインファイルではワイヤーフレームやWEBデザインが、FigJamファイルではオンラインホワイトボードを用いたブレインストーミングなどができます。

![Figma ファイル説明](//images.ctfassets.net/2kcyx6q7ww5g/4odqVKExk35f1VJhPGX76u/8168446addb3dff458e14c0063e52bcb/Figma___________________.png)

WordやPowerPointに例えると、「名前を付けて保存」できるひとまとまりがファイルです。

このファイルをFigma内のどこに作成するかが、料金プランの制約にかかわってくるのです。

「下書き（フォルダのようなもの）」内に作成するファイル（無制限に作れる）は、自分が編集者として管理する時に使います（閲覧者を招待することはできます）。

一方、チームで制作（編集・閲覧）を行う場合は、このファイルを「プロジェクト」に移行する必要があります。この「チームのプロジェクト」内のフォルダ数については、契約したプランによって制限がかかります。

以下より、Figmaにおけるファイルの作成方法や管理について詳しくみていきましょう！

#### Figmaの下書きファイル
ホーム画面で「下書き」が選択されている状態で、以下の破線枠内に表示されているのが下書きファイル（ドラフトともいう）です。

アカウントを作ったばかりでも、デフォルトでワイヤーフレームなどいくつかのファイルが用意されています。

__この中には、無料プランでいくつでもファイルを生成することができます。__

![figma ファイル](//images.ctfassets.net/2kcyx6q7ww5g/3Zi6cE1w8s15xxSxolJ5b8/045dec637cf38670fd93d405700395bd/figma_____________.png)

※「すべてのファイル」にはFigmaファイルもFigJamファイルも入っています

試しに、「下書き」内のファイルをひとつクリックしてみましょう（こちらは、デフォルトで用意されているワイヤーフレームです）。

このように、「ファイル」にはWEBサイトひとつ分のデザインが格納されています。なお、ひとつのファイルには複数の「ページ」を設けることが可能です。

![Figma ワイヤーフレーム](//images.ctfassets.net/2kcyx6q7ww5g/6HXncgD87ImnvCLkyygVai/fa112b513c628dcb93cf3d01f643a1b9/Figma_________________________.png)

なお、ホーム画面に戻るには、画面左上の「Figmaアイコン」→「ファイルに戻る」を選択します（デスクトップアプリの場合は「ホームボタン」）。

#### Figma下書きファイルの新規作成
下書きファイルを新規作成するには、「下書き」が選択されている状態で、「figmaでデザイン」もしくは「FigJamファイルの新規作成」をクリックします。

![Figma ファイルの新規作成](//images.ctfassets.net/2kcyx6q7ww5g/13jHFO3t3r50Qb58URa7Wm/156b5349614e3c35bf3372ed3713d13a/Figma____________________________.png)

「新規作成」すると、自動的にファイルがひとつ生成されます。

保存はオートセーブですので、特別な操作をする必要はありません。「新規作成」した後にホーム画面に戻ると、今作成したファイルが、「すべてのファイル」に追加されているはずです。

#### チームのプロジェクト
では次に、ホーム画面から「下書き」ではなく「チームのプロジェクト」を選択してみましょう。すると、メイン画面の表示が切り替わりましたね。これが「チームのプロジェクト」のページです。

ここでも同じように、「Figmaのデザイン」「FigJamのホワイトボード」のファイルが作成できます。そして、チームのメンバー全員に、ファイルへのアクセス権があります。

![Figma チームのプロジェクト](//images.ctfassets.net/2kcyx6q7ww5g/7qR1wQXvVSEreEfIc8Oq79/0b88fb1649cb8c48f41a6a0966057583/Figma_____________________________________.png)

__ただし、スターター（無料）プランでは、作成できるプロジェクト数は１つまで、Figmaデザインファイル３つまで、FigJamファイル3つまでとなっています。__

### Figmaホーム画面のカスタマイズ
最後に、ホーム画面のカスタマイズ方法について解説します。これは、「下書き」「チームのプロジェクト」共通の操作です。

#### ファイル表示をカスタマイズ
ファイルが増えてきたときは、「すべてのファイル」を「デザインファイル」または「FigJamファイル」に切り替えることができます。

こうすることで、「デザインファイルのみ表示」または「FigJamファイルのみ表示」として、目的のファイルを見つけやすくなります。

![FIgma ファイル表示選択](//images.ctfassets.net/2kcyx6q7ww5g/1vQBso9IvSoc5MnX1EEQja/c109a9af8fe906608aa60f982a291176/FIgma_________________________.png)

ファイルにカーソルを合わせると「星印」が現れるので、これをクリックすることで「ファイルのお気に入り登録」ができます。すぐに見つけたいファイルは「お気に入り」に入れておきましょう。

![お気に入り登録](//images.ctfassets.net/2kcyx6q7ww5g/4nVmuvcG7bUIdMKDN3r7os/2f9bba039b1ef898be49fee80e5e4226/_____________________.png)

また、ファイルの並び順を「アルファベット順」や「作成日順」に並び替えることができます。

![Figma ファイル並び順](//images.ctfassets.net/2kcyx6q7ww5g/7BoulkWtDwVM4qVPyCN26m/9c1e10eb07c0cd4bcf1278981c1fab80/Figma_________________________.png)

さらに、ファイルの表示の仕方を、「大型アイコン」から「文字表記」に切り替えることができます。

![figma 表示切り替え](//images.ctfassets.net/2kcyx6q7ww5g/3VKfREbvNLKZDSR54GazVK/408a8ff20205dc838c435f2b263af9d4/figma___________________.png)

#### Figma画面をダークモードにする
Figmaホーム画面右上の「アカウントアイコン」から、「テーマ」を選ぶと作業画面をダークモードにすることができます。

![Figma ダークモード](//images.ctfassets.net/2kcyx6q7ww5g/3lWMgYD09WjeIJAWsXnnYn/c7bb927fec7926ea4be507ffad31db7c/Figma_________________________.png)

今回は、以上です。快適な環境で、Figmaライフを楽しみましょう！

Figma初心者向け使い方解説【複数アカウント管理＆ファイル管理】

本記事では、Figmaでデザインをしていく上で必須の「フレーム」の使い方について解説していきます。「フレーム」は、Figmaの肝（キモ）ともいえる機能ですので、しっかり学んで使いこなしてくださいね！

__ONE POINT 〜フレームって何？〜__

Figmaの「フレーム」を理解するには、次の２つのイメージをもっておくとよいでしょう。ひとつめは「（photoshopなどでいうところの）アートボード」の役割、もうひとつは「フレックスボックスの親要素」のような役割です。

※フレックスボックスとは、webページのレイアウトを調整するためのCSSの機能で、要素の配置を「縦並び、横並び、中央寄せ…」などに指定することができます。Figmaのフレームでは、「オートレイアウト」という機能を用いることで、フレックスボックスのような「要素の自動整列」が可能です。

こちらが実際にフレームを使って作ったWEBサイトのイメージです。各ページ黒枠で囲った部分がフレームです（HOMEのみわかりやすいよう赤枠にしてあります）。
![Figmaフレームイメージ](//images.ctfassets.net/2kcyx6q7ww5g/2UeitsQxn1GIzgSo4FVqxc/276cffbfca08d6a5f9f77e749437a50c/____________________________2023-03-12_21.24.45.png)
アートボードのようにページ全体のサイズを決めるフレームの他、各セクションの親ボックスとして、または複数の子要素をグルーピングするときの親ボックスとして使用します（※「グループ」との違いは後述します）。特に、子要素を一定の規則（縦or横or中央揃え、均等配置など）に従って配置したいときに使います。

### Figmaのフレーム　〜アートボードとしての使い方〜
まずは、「デザインファイルを新規作成」からキャンバスに移動しましょう。

この辺りがよくわからない方は、こちらの記事をどうぞ！
[Figma初心者向け使い方解説【複数アカウント管理＆ファイル管理】](https://implist.dev/entries/figma-account-and-file-management-for-beginner)

フレームを呼び出すには、ツールバーの「フレーム」を選択します。「フレーム」が選択されていると、画面右のメニューにフレームの選択肢が現れますので、ここからデザインの外枠となるスクリーンサイズを選びます。

このとき、「スマホ」「タブレット」「デスクトップ」…などのデバイス名を選択すると、さらに「iPhone14, iPhone14Pro…」などといった細かい選択肢が展開されます。PCやスマホだけでなく「用紙（A4, A5…）」などからも選択できますよ！
![Figmaフレーム呼び出し](//images.ctfassets.net/2kcyx6q7ww5g/25gRwADJcnquDA6Akgka38/077e3ad293f60d87d304088d104f79f4/Figma___________________________.png)

こういったフレームは、ひとつのキャンバスにいくつでも作成することができます。また、フレームを削除するときは、削除したいフレームが選択された状態で（選択されているフレームは青枠で表示されます）「delete」キーを押します。

#### フレームに名前つける
作成したフレームには、名前を付けることができます。キャンバス上またはレイヤーパネルで、デフォルトのフレーム名をダブルクリックすると、文字を入力できるようになります。「HOME」「ABOUT」「CONTACT」…など、名前をつけてコンテンツを整理しましょう。
![Figmaフレームに名前をつける](//images.ctfassets.net/2kcyx6q7ww5g/GRxDDPgrD64BgVgnzVD9R/8052716af5d98d7fed0490fa22fbe06d/Figma_________________________________.png)

#### フレームのサイズ変更
フレームのサイズ変更にはいくつかの方法があります。

その１「フレーム」の選択肢から変更
サイズ変更したいフレームを選択し、画面右の「デザイン」タブの「フレーム」から、先程のようなフレームの選択肢を呼び出します。この中から変更したいサイズをクリックすればOKです。
![Figmaフレームサイズを変更](//images.ctfassets.net/2kcyx6q7ww5g/6hSdzSANpYuu8oKAo92CPF/9ddb763f209f40b9baae0c0a736bd8a0/Figma_________________________________.png)

その２「フレーム」の数値から変更
サイズを変更したいフレームを選択し、画面右のW（wide=幅）、H（Hight=高さ）の数値を入力します。

その３「フレーム」をドラッグして変更
フレームの各辺（上・下・左・右）にカーソルを合わせると、矢印（「⇔」）が現れます。この状態で、その辺を引っ張る（ドラッグする）と、その方向にフレームが拡大or縮小します。
![Figmaオートレイアウト サイズ調整](//images.ctfassets.net/2kcyx6q7ww5g/2TCP8ncEBC2RaRExyYOEMN/ef937e9eb6d0d6b270569641c5872713/Figma___________________________________________.png)

デザインをしていてフレームの長さが足りなくなってしまった場合は、「その２」または「その３」を活用しましょう！

### Figmaのフレーム　〜オートレイアウトの使い方〜
Figmaのフレームには、アートボードのようなサイト全体のサイズを定義する使い方の他に、ある子要素に対する親要素（親ボックス）としての使い方があります。※フレームの中にフレームを入れる（ネストする）こともできます。

フレームが本領を発揮するのは、ある要素の「親ボックス」として「オートレイアウト」を適用するときだといえます。

…というわけで早速、オートレイアウトとはどのような機能か見てみましょう！

まず、適当なサイズのフレームを用意し、中に要素（今回は図形３つ）を加えます。そして、３つの図形の親ボックスであるフレームを選択し、画面右の「オートレイアウト」をクリックしてみましょう。

適当に並べた３つの図形が一瞬で整列しましたね！…同時に、「オートレイアウト」のメニューが現れました。ここでレイアウトの詳しい設定をしていきます。
![Figmaオートレイアウト](//images.ctfassets.net/2kcyx6q7ww5g/71hReg5Ex3ZsCLe6h1EhqT/97fe97039a0a6e2479a02461d3831ea1/Figma________________________.png)
※オートレイアウトは「中の要素をどのように並べるか」を決めるためのものです。ですので、設定したいときは、並べられる側の子要素ではなく、それらの親要素を選択しましょう。

#### オートレイアウト　〜縦並べ・横並べの設定〜
中の要素を縦に並べたい時は「オートレイアウトメニュー」で「↓」アイコンを選択します。また、横に並べたい時は「➞」アイコンを選択します。
![Figmaオートレイアウト 縦横並び替え](//images.ctfassets.net/2kcyx6q7ww5g/2p6vjL2m0GGMDcksRtyiFu/18f12a00ad5d7648b78f024663eb1975/Figma______________________________________________.png)

#### オートレイアウト　〜要素の配置の設定〜
「オートレイアウトメニュー」内のパネルでは、親ボックスのどの位置に子要素を配置するかを設定します。以下に、例として「中央」および「中央上」を設定した場合を示しました。
![Figmaオートレイアウト要素の配置](//images.ctfassets.net/2kcyx6q7ww5g/uitZolVh2KYZba0goxd8i/99dd710b2704ecb885056133af7df074/Figma_______________________________________.png)

#### オートレイアウト　〜要素間の間隔の設定〜
次は、要素間の間隔を設定してみましょう。これには、「オートレイアウトメニュー」内の要素間隔を表す数値を入力する方法と、キャンバス上で矢印をドラッグすることで間隔を伸縮させる方法があります。

また、「オートレイアウトメニュー」内の「・・・」アイコンからさらに詳細メニューを展開し、要素を「詰めて配置」するか「間隔を空けて配置」するかを選択できます。
![Figmaオートレイアウト 要素間の間隔の設定](//images.ctfassets.net/2kcyx6q7ww5g/6KdHkTRBouTyYtYBf3mSwI/c6918cb19eca11023aa41d681de9ec10/Figma____________________________________________________.png)

#### オートレイアウト　〜パディングの設定〜
「オートレイアウトメニュー」から、水平方向（「上下」）および垂直方向（「左右」）のパディングを調整することができます。なお、「上」「下」または「左」「右」のパディングを個別に設定したい場合は、「四隅が切れた四角形アイコン」から個別設定ができます。

パディングは、キャンバス上でパディング部分をドラッグすることで伸縮させることもできます。
![Figmaオートレイアウト パディングの設定](//images.ctfassets.net/2kcyx6q7ww5g/6M40nQUkxvXeQWvxz38ykR/30abb53cf65108902932520dcfece847/Figma__________________________________________________________.png)
__パディングを設定する際、「フレームメニュー」の「コンテンツをハグ」を選んでおくと、設定したパディングに合わせて親ボックスのサイズが自動調整されます。便利な機能ですのでぜひ覚えておきましょう__

#### オートレイアウト削除（解除）
オートレイアウトを削除（解除）したいときは、「オートレイアウトメニュー」の「−（マイナス）」アイコンをクリックしましょう。オートレイアウトが解除されると、子要素を再び個別に選択・移動できるようになります。
![Figmaオートレイアウト削除（解除）](//images.ctfassets.net/2kcyx6q7ww5g/5eetChYFd9PgEAnymJdES9/9d1a4c5d1881e8fb8ad864bbff5ad2e9/Figma__________________________________________.png)

### Figma フレームとグループの違い
「フレーム」と似た機能に「グループ」があります。グループもフレームも、包含する複数の子要素をまとめて移動させたり、まとめて表示/非表示の切り替えができる便利な機能です。

そして、グループとフレームは相互に変換可能です。

今、この状態でグループをフレームに変更しても、一見何も変化が起こりません。…では、グループとフレームは何が違うのでしょうか？
![Figmaフレームとグループの違い](//images.ctfassets.net/2kcyx6q7ww5g/3dpmzSfK0X31ox1TXALM5z/e815a4418868af185a8ef1712e6f12f1/Figma__________________________________________.png)

__ONE POINT　〜グループ化の方法〜__
グループ化したい要素を選択し（「Shift」キーを押しながら要素をクリックしていくことで、複数選択ができます）、「Command＋G」でグループ化できます。あるいは、「右クリック➞選択範囲のグループ化」でもOKです。

#### フレームの特徴
フレームの最大の特徴は、先程述べたような「オートレイアウト」が適用できることです。ただのグループには、これが適用できません。

また、フレームはグループと違って、それそのものが一つの要素です。つまり、フレームは単体（子要素を含まない状態）でも存在できます。

そして、中に子要素がある場合は、それらの「親ボックス」として機能します。親ボックスであるフレームには背景色もつけられますし、パディングなどの設定もできます。

#### グループの特徴
グループは、ただ単に要素をまとめたものです。

よって、フレームと違い「グループ」が単体で存在することはできません。そして、フレームのように背景色やパディングなどを設定することもできません。

この章の冒頭のように「グループからフレーム」に切り替えたときは見た目の変化がありませんでしたが、__「フレームからグループ」に切り替えると、背景色やパディングの設定は消えてしまいますので、注意しましょう__

また、フレームとグループでは「まとめて拡大/縮小」したときの子要素の動きも異なります。__フレームでは、親要素のフレームを拡大/縮小しても、フレームそのものがサイズ変更されるだけですが、グループでは中の子要素も連動してサイズ変更されることにも注意が必要です。__
![Figmaフレームとグループ_サイズ変更時の子要素の動き](//images.ctfassets.net/2kcyx6q7ww5g/7H6KQ9CwfTvanZmiSNlEND/8fc31caa7a3952570e46739d4adf8638/____________________________2023-03-11_18.40.25.png)

【Figma】フレームの使い方マスター編　〜グループとの違いやオートレイアウトについても解説〜

本記事では、Figmaにおけるテキストスタイルの設定や編集、そして、スタイルの登録・適用・解除方法について解説していきます。

ところで、「見やすいwebサイト」ってどのようなサイトだと思いますか？

レイアウトのテクニックは数あれど、やはり「タイトルや本文それぞれのフォントやテキストスタイルが揃っていること」は基本中の基本であるといえるでしょう。とはいえ、それぞれのパートを書くたびにスタイルを入力するのは手間がかかりますね…。
![レイアウトの良い例＆悪い例](//images.ctfassets.net/2kcyx6q7ww5g/4h1QRPxvpiMPbQTuD0tJhw/d2c437657f952d6584540b98f75ca885/_______________________________________.png)

Figmaでは、こういった「テキストスタイル」を登録し、名前を付けて管理する機能があるのです！

「タイトル」や「本文」に、あらかじめ登録したスタイルを呼び出して適用するだけなので、いちいちスタイルを入力する時間を短縮できるほか、入力ミスを防止するメリットもあります。本記事で「テキストスタイル」の使い方をばっちりマスターして、効率よくサイトをデザインしましょう！

記事を読みながらFigmaを操作する場合は、準備として「新規ファイル」を作成し、適当な「フレーム」を作成しておいてください。

【関連記事】  
ファイルの作成について：[Figma初心者向け使い方解説【複数アカウント管理＆ファイル管理】](https://implist.dev/entries/figma-account-and-file-management-for-beginner)  
フレームについて：[【Figma】フレームの使い方マスター編　〜グループとの違いやオートレイアウトについても解説〜](https://implist.dev/entries/figma-frame-and-auto-layout-group)

### Figma テキストスタイルの設定方法
まずは、テキストスタイルの設定方法からみていきましょう。

ツールバーから「テキストツール（Tのアイコン）」を選択し、文字を入力してみましょう。そして、その文字列を選択した状態で、画面右の「テキスト」からスタイルを設定します。
![Figma テキストスタイルメニュー](//images.ctfassets.net/2kcyx6q7ww5g/17joD0PPJP198BF4vER7HM/64f8ee0f2f440182ba0bffe9c1d92e8e/Figma________________________________________.png)

適用できるテキストのスタイルうち、まずはデフォルトで表示されているものについて解説します。①フォント、⑦テキストボックスの調整については、以下に図で補足しました。
![Figma テキストスタイル編集](//images.ctfassets.net/2kcyx6q7ww5g/7I0zR8nEVopG9tRptLreul/79811bcfecdb5163bed6a6847d22744d/Figma__________________________________.png)

①フォント：表示されているフォントにカーソルを合わせるとボタンが現れ、これをクリックするとフォントメニューが開きます。ここから好みのフォントを選択・変更できます。

②太さ（ウェイト）：文字の太さを設定します。フォントによっては選択肢がない場合もあります。ウェイトは、「W0, W1, W2…」「Thin, Regular, Bold…」など、フォントの種類によって表記が異なります。

__斜体が適用できるフォントは、上記に加えて「Italic」が選択できます。逆に言うと、「Italic」がないフォントは斜体にできません。__

③文字サイズ、④行間、⑤文字間隔、⑥段落間隔：それぞれ、直接数値を入力することで調整ができます。なお、文字サイズは選択肢からサイズを選ぶこともできます（フォントと同様、カーソルを合わせるとボタンが現れ、クリックするとメニューが開きます）。

⑦テキストボックスの調整：文字を入力したときのテキストボックスの動きを設定します。
- 幅の自動調整：テキストボックスは、文字数に応じた幅に自動調整されます
- 高さの自動調整：テキストボックスは、文字数に応じた高さに自動調整されます
- 固定サイズ：テキストボックスの幅・高さを固定します
    - ※文字が超過した場合はボックス外に溢れていきます  
    - ※「詳細設定」の「サイズ変更」から、はみ出した文字を切り取る設定にもできます

⑧、⑨テキストの配置：
⑧では、テキストボックスに対するテキストの配置を「左揃え/中央揃え/右揃え」にできます。
⑨では、テキストボックスに対するテキストの配置を「上/中央/下揃え」にできます。

さらに、「テキスト」メニュー右下の「・・・」ボタンをクリックすると、詳細な設定をすることができます。
![Figmaテキストスタイル編集詳細](//images.ctfassets.net/2kcyx6q7ww5g/Enph2hcZUj7LkXIYGN0GR/35d373e9570d32a2f548285b99df4707/Figma_______________________________________.png)

下線や取り消し線、段落インデントの他、リストスタイルを適用したいときもここで設定できます。適用したいスタイルにカーソルを合わせるとプレビューが表示されるので、ここから確認できます。

### Figma テキストスタイルの登録方法
使用したいテキストスタイル（フォント、文字サイズ、太さ…など）が決まったら、これを登録していきましょう。例として、「H2タイトル」に使用されているスタイルを登録してみます。

1. テキストを選択します。
2. 「テキスト」メニューの右上のアイコン（点が４つ）をクリックします。
3. 「テキストスタイル」と題された小さなボックスが開くので、この右上の「＋」をクリックします
    - ※するとさらに、「新しいテキストのスタイルを作成」と題されたボックスが開きます
5. 選択されたテキストのスタイルに名前をつけます。また、その下の「説明」欄に、このスタイルをどんなシチュエーションで使うのかといったメモを残すことができます。
    - ※「説明」は入力しなくてもスタイル登録できます
6. 「スタイルの作成」をクリックすると、スタイルが登録されます。
![Figmaテキストスタイル登録](//images.ctfassets.net/2kcyx6q7ww5g/76c54dQWDjvovIH6IaMgP9/071fa3460e1986d8b7efd1009b23f142/Figma______________________________.png)

### Figma テキストスタイルの適用方法
テキストスタイルの登録ができたら、次はそれを適用してみましょう。例として、２つ目の「H2タイトル」に、先ほど登録した「H2タイトルのスタイル」を適用してみましょう。

1. スタイルを適用させたいテキストを選択します。
2. 「テキスト」メニューの右上のアイコン（点が４つ）をクリックします。
    - ※登録したテキストスタイルが、選択肢として現れるようになっています
3. 「テキストスタイル」から、「H2タイトル（あらかじめ登録し、自身で名前を付けたもの）」を選択します。

これで、２つ目の「H2タイトル」にも、1つ目の「H2タイトル」と同じスタイルが適用されました。
![Figmaテキストスタイルの適用](//images.ctfassets.net/2kcyx6q7ww5g/1MNVUa6uIdH6IWi6vZP1ds/769974c481eeda198c2229adc41640ac/Figma_________________________________.png)

#### テキストスタイルの解除
ここでは、スタイルの適用を解除し、再度、個別のスタイルを設定したい場合について解説します。  （一部のスタイルは、設定を解除しなくても個別のスタイル設定ができます。）

登録したテキストスタイルを適用している場合、画面右の「テキストメニュー」には登録したスタイル名（今回は「H2タイトル」）が表示されています。このメニューにカーソルを合わせると、右上に「解除」のアイコンが表示されるので、これをクリックするとスタイルを解除できます。

__「解除」のアイコンはカーソルを合わせないと現れないのでご注意ください。__
![Fimaテキストスタイルの解除](//images.ctfassets.net/2kcyx6q7ww5g/51XA3yh940I7g2ZHLNoql1/115608aaa05db51c838b8a8bf2e84afc/Fima_________________________________.png)

### Figma 登録したテキストスタイルの変更方法
一度登録したテキストスタイルの内容を変更したい場合は、以下の方法で行います。

テキストスタイルが適用されている文字を選択し、そのタイトル（今回は「H2タイトル」）をクリックすると、スタイルのメニューが現れます（自分が登録したテキストスタイルが選択肢に現れます）。  なお、ここで、他の登録スタイル（例えば「H1タイトル」）を選択して変更・適用することもできます。

変更を加えたいスタイルにカーソルを合わせると、右端に設定アイコンが現れます。この設定アイコンをクリックすると、『Figma テキストスタイルの設定方法』で見た「テキストスタイルを編集」する小画面が現れ、編集ができるようになります。

試しに「H2タイトル」のサイズを変更してみましょう。
![Figmaテキストスタイルの変更](//images.ctfassets.net/2kcyx6q7ww5g/6vjevftAT2sb8LLsmORsUx/9032a1f468236163dee904baaaa16a9f/Figma_________________________________.png)

…2つの「H2タイトル」のサイズが同時に変わりましたね。このように、登録されたスタイルの内容を変更すると、それが適用されているテキスト全てに変更が適用されます。

なお、キャンバスのなにもないところをクリックすることで、「ローカルスタイル」を呼び出し、ここからテキストスタイルの設定を変更することもできます。

「ローカルスタイル」には、「テキスト」「色」「エフェクト」「グリッド」があり、それぞれにスタイルを登録することができます。
![Figmaテキストスタイル変更２](//images.ctfassets.net/2kcyx6q7ww5g/3VKmxwTc4knhfAmmO3nOuO/c14b63fed6f7c1fa2a74f450f5d129d4/Figma_________________________________.png)

__登録したスタイルを削除するには、ローカルスタイルでスタイルを選択し「delete」を押します。（誤って削除した場合は「Command+z」で「1つ前に戻る」を実行しましょう）__

### Figma 「テキストスタイル」として登録できないこと
ここでは、「テキストスタイル」として登録できそうでできないものをご紹介します。

#### 文字色
文字色自体は自由に設定できますが、これは「塗り」から設定します。

色は「色スタイル」として、テキストスタイルと同じ要領で登録・適用することができます。しかし、この色は「テキストスタイル」としてフォントなどとまとめて一括登録することはできません（「テキストスタイル」とは別に、「色スタイル」として登録・適用します）。

なお、登録した「色スタイル」は、図形など文字以外の要素にも適用することができます。
![Figma色スタイル](//images.ctfassets.net/2kcyx6q7ww5g/6HnDNciMbAqLKRBqSAuTcI/daf9abf37a9dc80b81fd0d572c48f543/Figma_______________.png)

#### エフェクト（ドロップシャドウなど）
文字につけるドロップシャドウなどのエフェクトについても、「色スタイル」と同様です。「テキストスタイル」に含めて一括で設定することができませんが、「エフェクトスタイル」として登録して適用することができます。

#### 文字下線（アンダーライン）の色を変更する
「テキストスタイル（詳しい設定）」では、テキストに「下線」を引くことができます（これは「テキストスタイル」として登録できます）。しかし、この下線の色は黒しかなく、色の変更ができません。よって黒以外の色でスタイルを登録することはできません。

もし、テキストに黒以外の下線を付けたい場合は、文字をフレームで囲い（要素を選択してCommand+Option+G）、このフレームに対して枠線の設定をするとよいでしょう（※枠線の「下」のみ表示にして、「線のスタイル」で色を変えます）。
![Figma文字に色付き下線を引く](//images.ctfassets.net/2kcyx6q7ww5g/3nJNIVoABcpqst2BhQLkRc/70d443bae099b4eb8559a57bea5ce838/Figma_________________________________.png)
ただし、この方法は複数行にまたがる文章には使えないため、タイトルなど短い文字列に使いましょう。

#### 文字背景色
テキストボックスには背景色が設定できないため、文字に背景色をつけることができません。

文章の背景に色を付けたい場合も、色付き下線の場合と同様に、文字をフレームで囲って、そのフレームに対して「塗り」の設定をするとよいでしょう。

### おわりに
Figmaのスタイル設定では、デフォルト機能ではできないことも、フレームなどと組み合わせたり、プラグインを活用したりすることでできるようになる場合があります。それらについても、今後ご紹介していきたいと思います。


【Figma】テキストスタイルの使い方 〜設定・登録・解除方法〜 徹底解説！

WEB制作に欠かせない要素として「画像（写真やイラスト）」がありますね。
トップイメージの他に、
- 商品
- メンバーの写真
- 背景イラスト
など１つのWEBサイトには数多くの画像が配置されます。

本記事では、
- 画像の配置
- サイズ調整
- トリミング
- マスク
- 編集（色彩調整）
- 書き出し
- 画像に関する便利なプラグイン

をご紹介します。

これまでに解説した「フレームの使い方」「テキストスタイルの設定」に加えて、今回の画像操作をマスターすれば、FigmaでオーソドックスなWEBサイトがデザインできるようになるでしょう！

[【Figma】フレームの使い方マスター編〜グループとの違いやオートレイアウトについても解説〜](https://implist.dev/entries/figma-frame-and-auto-layout-group)

[【Figma】テキストスタイルの使い方〜設定・登録・解除方法〜](https://implist.dev/entries/figma-text-style-setting-register-delete)

### Figma 画像の配置
Fimaの画像は、図形の「塗り」として配置されます。__つまり、Figmaにおける画像の配置は、「図形を画像で塗りつぶす」という操作を意味します。__

ではさっそく、下図のようなレイアウトに対して、長方形部分に画像を配置してみましょう。
![画像配置例](//images.ctfassets.net/2kcyx6q7ww5g/2HzQesIiNXlcV9qW1Ew69d/b9bd438136188ab43fec552c759b0ebe/_______________.png)
※画像はフリー素材を用いています（pixabayより）

1. ツールバーより、「画像/動画を配置」クリック（画像ファイル選択画面に移動）
    - ※この操作のショートカット：Shift+Command+K
2. フォルダから画像を選択し、「開く」をクリック
3. 塗りつぶしたい図形をクリック
![画像を配置する](//images.ctfassets.net/2kcyx6q7ww5g/1EeP6pnRwNPdmNGrnBuxCY/8209564aedbf2db8b722fa45d4d60c5c/_____________________.png)

#### ドラッグ＆ドロップによる画像の配置
Figmaのキャンバスに画像を配置する方法としては、ご自身のPCのフォルダから直接ドラッグ＆ドロップするやり方もあります。

この場合も、画像は「元の画像サイズの図形（長方形など）が画像で塗りつぶされている」ものとして処理されています。
![ドラッグ&ドロップによる画像の配置](//images.ctfassets.net/2kcyx6q7ww5g/5ZyoNcdzrYMrELrQwYF3ng/212e2afd1043ce5c77597e955c9f9039/_____________________________________________________________.png)

#### 画像の差し替え
いったん図形に画像を配置したあとでも、上記の配置と同じ方法で画像を差し替えられます。

1. 「Shift+Command+K」で画像の呼び出し
2. 画像を選択し、「開く」をクリック
3. 差し替えたい画像が入った図形をクリック

なお、Figmaでは画像を「削除する」という操作はなく、（もともと「画像で塗りつぶされているだけ」なので）画像を消したい場合は、別の「色」で塗り替えるという操作をします。

1. 消したい画像をダブルクリック
2. メニューが開くので「画像」をクリック
3. 塗りの選択肢が表示されるので、「単色」を選び適当な色をあてる
![画像の削除](//images.ctfassets.net/2kcyx6q7ww5g/29Xqoti91nzoilR1iIeLmj/64298195bf8d1157fc43daa5d0e590f5/_______________.png)

### Figma 画像のサイズ調整
画像が配置されている図形も、通常の図形のサイズ調整と同じように大きさの変更ができます。

1. サイズを変更したい図形（画像）をクリックして選択
2. 辺にカーソルを合わせる（矢印が現れる）
3. 矢印をドラッグして、図形（画像）を縦・横に拡大/縮小

なお、選択した図形の四隅に現れる点にカーソルを合わせると、斜めの矢印が現れるので、これをドラッグすることで全体のサイズを変えられます。この時、Shiftキーを押しながらドラッグすると、図形の縦横比を変えずに全体を拡大/縮小できます。
![画像のサイズ変更](//images.ctfassets.net/2kcyx6q7ww5g/2ZWio8MeWaaHxqUjJaaDpQ/7713b525c5e1156dee48f487be84f3df/___________________________.png)

### Figma 画像のトリミング
図形に画像を配置すると、ツールバーに自動的に「トリミング」アイコンが加わります。
（見当たらない場合は、画像をクリックして”選択された状態”にしてみましょう。）
![トリミングモードにする](//images.ctfassets.net/2kcyx6q7ww5g/6vguf4AiQgjNLkIpTcHSlr/edfe0e779383c140007a190ff326fa55/_______________________________________.png)

画像をトリミングする際は、まず目的の画像をクリックで選択してから、ツールバーの「トリミング」をクリックします。すると、画像がトリミングモードになりますので、矢印（カーソルを合わせると出現します）をドラッグして画像をトリミングします。

十字の矢印が出ているときにドラッグすると、（トリミング範囲でなく）画像それ自体を移動させられます。
![画像のトリミング](//images.ctfassets.net/2kcyx6q7ww5g/3AIbp2HBaR9pXGjbUe6uWu/dd44ac6cf4805ddf7f7adecaa0e1b537/___________________________.png)

トリミング範囲を確定するには、画像外の任意の場所（どこでもOK）をクリックするかEnterキーを押します。

なお、切り取られた場所は完全に削除されたわけではないので、もう一度画像を選択してトリミングアイコンをクリックすれば、再度トリミング範囲を設定できます。

### Figma 画像のマスク
まずは、「画像を図形でマスクする」とはどういうことかイメージしましょう。

「画像を図形でマスクする」と、画像のうち図形の範囲以外の部分が隠れます。ですので、画像を図形でくり抜いたように見えます（実際は、カットされたわけではなく、カバーされて見えなくなっただけです）。
![マスクのイメージ](//images.ctfassets.net/2kcyx6q7ww5g/1smppC5w0nFIWY2enQyf1e/6b5ba2827f4323793bc181ae12029cf1/___________________________.png)

では、Figmaにおいて「画像を図形でマスクする」方法を見ていきましょう。

1. 画像を配置
2. マスクに使う図形を、画像の残したい場所に設置
3. 図形を画像の下に配置
4. マスクに使う図形と画像の両方を選択
    - shiftキーを押しながら、画像レイヤーと図形レイヤーを順番にクリック
5. ツールバーの「マスクとして使用」をクリック
![画像のマスク1](//images.ctfassets.net/2kcyx6q7ww5g/4Y4aVjQ5Agp9QatOEXTvoK/80ad8948c3974e825cb56a1b774b15f3/__________________1.png)
![画像のマスク2](//images.ctfassets.net/2kcyx6q7ww5g/HNePgmZw6Ts96OAlJyI85/52eb2e9db806b0679ded42d258c720ef/__________________2.png)

マスクを解除するときは、「マスクに使った図形のレイヤー」を選択肢、もう一度ツールバーの「マスク」をクリックします。__※マスクは「切り抜き」ではないので元の図形（画像）も保存されています。__

マスク後に画像を移動する場合、画像をドラッグすると（マスク用の図形は動かずに）画像のみが動いてしまいます。ですので、__マスクに用いた図形と画像はグループ化しておくことがおすすめです。__

これまで解説してきたように、画像の一部のみを使いたい場合には、「図形を画像で塗りつぶしてから、トリミングする」、もしくは「画像を図形でマスクする」方法が選べます。それぞれ練習して、使いやすい方を用いましょう！

### Figma画像の色調補正
続いて、画像の色調補正の仕方について解説します。

画像をダブルクリックすると、画像に関するメニューが開きます。メニューには以下の項目があり、それぞれに調節バーが付いています。
- 露出
- コントラスト
- サイド
- 温度
- 濃淡
- ハイライト
- シャドウ
![画像メニュー](//images.ctfassets.net/2kcyx6q7ww5g/1abMuRpr7SQU9uTA96hxEo/3d5a268c2c8e9ec178132636238ff045/__________________.png)

それぞれの効果をざっくり解説すると、以下ようになります。
![色調補正](//images.ctfassets.net/2kcyx6q7ww5g/7qsAqEnn4wRVgZxJIX2tF4/6dc4c8aae7f3f58e21fe2af402680043/____________.png)

「露出」という言葉がわかりづらいかもしれませんが、これは（一眼レフなどの）カメラで写真を撮る時に、レンズに取り込まれる光の量を調節するイメージです。つまり、露出を多くするとは「光量が多い像にする」ということです。

例えば画像全体を暗くして白文字を入れようとした場合、「部分的な光によって白文字が映えない」ということがあります。そんなときは、それぞれの調節バーをうまく組み合わせて、光が全体の暗さに馴染むように、うまく調節していきましょう。
![光量調整例](//images.ctfassets.net/2kcyx6q7ww5g/3AZaMOnJTrgVIss2lI25FM/6621475b30ff6038796424d32292ae09/_______________.png)

#### 画像の「タイル」で配置する
画像のメニューの一つに、「タイル」というものがあります。これは、CSSでいうところのrepeat（リピート）と同じ意味です。

このように、背景全体に模様を繰り返し使いたい時に便利です。
![画像をタイルで配置](//images.ctfassets.net/2kcyx6q7ww5g/4b2V6aSaL1tiAfGB8Pgj8H/de2fa3a44ecf0e32d34aaf7f875ebda1/______________________________.png)

### Figma 画像の書き出し
ここでは、Figmaでの制作物をJPEGやPNGとして書き出す方法について解説します。

1. 書き出したいレイヤー（またはフレーム、図形）を選択
2. サイズを設定（0.5倍、2倍…など）
3. 拡張子（JPEG, PNG, SVG, PDF）を設定
4. 「エクスポート」ボタンをクリック

なお、エクスポートの際、「重なり合うレイヤーを無視する」にチェックが入っていると選択した画像のみが書き出され、チェックを外すと画像に重なる他の図形なども一緒に書き出されます。
![画像の書き出し](//images.ctfassets.net/2kcyx6q7ww5g/3oDayWVQnYnjFLcIPkCEmo/5da04a5f78450f4d52a36ad15fccfd94/_____________________.png)

以下ような制作物で、PNGで書き出す場合、背景を透過させる場合は「塗り」の欄の「エクスポートに含める」のチェックを外しましょう。

![画像の書き出し 背景の透過](//images.ctfassets.net/2kcyx6q7ww5g/3QNiiPRMpxHveyQ1hJ6JV5/9d06b12680996c71f27768043d778cba/_____________________________________.png)

### Figma 画像に関する便利なプラグイン
最後に、画像に関する便利なプラグインをご紹介します。

#### Unsplash
こちらは商用利用可能なフリーの素材サイトです。
（利用範囲については、利用規定をお読みください）

初めて利用する場合は、以下のように呼び出します。
__「メニュー」→「プラグイン」→「プラグインをさらに検索」→「Unsplash と入力」して検索　→「実行」をクリック__
![プラグインの設定](//images.ctfassets.net/2kcyx6q7ww5g/4jGENvTfiy4v0f3H5l4AQ1/55c39867e0b2db215cc176a8c518b7f9/______________________________.png)
一度使用すると「最近使ったプラグイン」から再度利用することができます。

図形を挿入・選択した状態で、「プラグイン」からUnsplashを呼び出し、気に入った画像をクリックするだけで、その図形が画像で塗り潰されます。
![Unsplashからの画像の挿入](//images.ctfassets.net/2kcyx6q7ww5g/6fVWvhLVLkVleY31IJyRft/913ea9500f837115e85ab45bdeb1396c/Unsplash________________________.png)

#### Blobs
「Blobs」というプラグインを用いると、ふにゃふにゃの図形を作成できます。

上下のバーで、「ふにゃふにゃ具合」を調整します。「Insert（挿入）」をクリックすると、キャンパス上に図形が挿入されます。
![Blobsの使用例](//images.ctfassets.net/2kcyx6q7ww5g/3Sx80L7OjxNYhOfj8vZNYU/15c346a3849c236f7f6c17fe1598c296/Blobs____________.png)

このふにゃふにゃの図形と画像を組み合わせることで、個性的なデザインが楽しめます（通常の「図形」に画像を挿入するのと同じやり方でOKです）。

### おわりに
今回解説した画像の配置とその編集と、前記事の「テキストの編集」「レイヤー」をマスターすれば、簡単なWEBデザインはできるようになります。

今後、細かい技やプラグインも活用して、様々なデザインが実装できるようになっていきましょう！

Figma 画像配置・トリミング・色調整・書き出しをマスター！

本記事では、Figmaの超便利機能「コンポーネント」の使い方について、解説します！

複数のページを持つWEBサイトを製作する場合、コンポーネントを使いこなすことで、作業時間を大幅に短縮することができるでしょう。

「コンポーネントって何？」という初心者の方が、コンポーネントを使いこなせるようになることを目標に解説していきますので、手を動かしながら一緒に学んでいきましょう！

- コンポーネントとは？
- コンポーネントの使い方
  - コンポーネントの解除
  - コンポーネントの画像差し替え
  - コンポーネントのショーカット
- バリアントの使い方

### Figma コンポーネントとは
__コンポーネントとは、繰り返し出てくる要素をまとめて、ひとつの要素として定義したもののことです。__

コンポーネント化しておくと便利な要素として、例えば以下のようなものがあります。

- ヘッダー＆フッター
- 固定化した記事デザイン
- デザイン化された見出し
- ボタン

WEBサイトに複数のページがある場合、これらは共通の要素として繰り返し使われます。
![コンポーネントのイメージ](//images.ctfassets.net/2kcyx6q7ww5g/12BWT3tS4tFAmoxPH5EbmY/596df51bf33256c90840cd4b235472af/_______________________________________.png)

もちろんコピー&ペーストで同じデザインを作ることも可能です…が、コンポーネントが本領を発揮するのは、繰り返し使われるデザインにまとめて変更を加えたいというときです。

コンポーネントは、「メインコンポーネント」とそのコピーである「インスタンス」がありますが、
メインコンポーネントに変更を加えると、インスタンスにもその変更が適用されるのです。
（詳しいやり方は、次の「コンポーネントの使い方」で解説します）
![コンポーネントのイメージ2](//images.ctfassets.net/2kcyx6q7ww5g/4uKLSOjcyP0eZ11We0BZ5c/53311183662d0f00f45b41b8bce065c4/__________________________________________2.png)

このように、要素をコンポーネント化しておくことで、複数ページにまたがる変更を一気に行うことができるのです。

### Figma コンポーネントの使い方
ではさっそく、要素を「コンポーネント化」し、その「コンポーネント化した要素」を使ってみましょう。

今回は、ヘッダーを例にとって見てみます。

1. メインコンポーネント（コピー元つまり”親”）となる要素を選択
2. 上記要素のコンポーネント化
3. インスタンス（メインコンポーネントのコピー）の呼び出し

複数の要素を選択するときは、その要素を含む範囲をドラッグするか、「レイヤーパネル」で「shiftキー」を押しながら要素を選択していきます。
![複数要素の選択](//images.ctfassets.net/2kcyx6q7ww5g/74Ij20fCEAe3LHvmDA13Kw/779e7ad90b78f8a0b12eee17a56676d8/_____________________.png)

要素を選択したら、ツールバー（画面上）より「コンポーネントの作成」アイコンをクリックします。
![コンポーネント化](//images.ctfassets.net/2kcyx6q7ww5g/suEsdn4k9SSbzyESMjnwV/fb4f62740092a4d382c3b336a7288b10/___________________________.png)

コンポーネント化した要素は、画面左の「アセット（レイヤーの隣）」に保管されています。ここからドラッグ＆ドロップで、コンポーネント化した要素を呼び出すことができます。
![インスタンスを生成](//images.ctfassets.net/2kcyx6q7ww5g/2zahJlrAHPhsAXIaQPNw8N/7ccb690401dec198d7f132d28a6408b1/___________________________.png)

メインコンポーネントとインスタンスは、レイヤーパネルでの表示マークで見分けることができます。

なお、コンポーネント化された要素が選択されている場合、画面右の「デザイン」タブに「コンポーネント」の項目が現れますので、ここから各コンポーネントに名前をつけることができます。
![インスタンスの生成](//images.ctfassets.net/2kcyx6q7ww5g/7DeoktJD5kzK74Uo4pxE8t/eef59b0f846423d97b5d13443b967b24/___________________________.png)

では、ここでメインコンポーネントについて、何らかのスタイル（背景色など）を変更してみましょう。
![コンポーネントを使ったスタイル変更](//images.ctfassets.net/2kcyx6q7ww5g/5hUFOUplxi37ehaTzm9jO0/8d160bbe2e9c32e1a753e45ebdc571f2/______________________________________________________.png)

インスタンスのスタイルも同じように変更されましたね！インスタンスが複数個ある場合も、全て同時に新たなスタイルが適用されます。

__もし、作業中にメインコンポーネントに移動したくなった場合は、「デザイン」タブから、「メインコンポーネントに移動」のアイコンをクリックすればOKです。__
![メインコンポーネントに移動](//images.ctfassets.net/2kcyx6q7ww5g/3Ggkda8MffY6J0dnrhzZIP/1a8c9f5be968d2bb73f29f265a51c7d6/__________________________________________.png)

#### Figma コンポーネントの解除
コンポーネント解除するには、解除したいインスタンスを選択し、右クリックして「インスタンスの切り離し」をクリックします。

これで選択したインスタンスのみを切り離すことができます。
![インスタンスの切り離し](//images.ctfassets.net/2kcyx6q7ww5g/7zfFTLIo2xB9XrN8EwKKzG/a236010fb2347c053622ebc6a8c7e68b/_________________________________.png)

なお、この「切り離し」は、メインコンポーネントに対しては行えません（「切り離し」という選択肢が現れません）。

__コンポーネントのすべてを解除したい場合は、「インスタンス」をすべて切り離した後、メインコンポーネントを削除し、「元インスタンス（切り離し後は「フレームとその要素」）」のひとつからコピー&ペーストしましょう。__

なお、インスタンスを切り離さずにメインコンポーネントを削除した場合は、インスタンスはそのまま残ります。

もしもメインコンポーネントを誤って削除してしまった場合は、「コンポーネントの復元」ボタン（インスタンスをクリックして「デザイン」タブへ）から復元が可能です。
![インスタンスの復元](//images.ctfassets.net/2kcyx6q7ww5g/4renU9VtgdF6MnHgR3cp4p/08b8eb64005b37f19494d0289d8df4c7/___________________________.png)

#### Figma コンポーネントの画像差し替え
画像も含めてコンポーネント化した場合、当然、最初はどのインスタンスも同じ画像が挿入されています。

（メインコンポーネントをいじると全てのインスタンスに変更が反映されますが）、ひとつひとつのインスタンスに個別に変更を加えた場合には、その変更が他に影響することはありません。

__よって、インスタンスへの画像の差し替えは、「通常の画像の差し替え」と全く同じ方法で行うことができます。__

参考：[『Figma画像配置・トリミング・色調整・書き出しをマスター』](https://implist.dev/entries/figma-image-arrangement-trimming-color-tone-adjustment-and-export)

![コンポーネント画像の差し替え](//images.ctfassets.net/2kcyx6q7ww5g/6rc1FVIkgXB0umctKzebr4/fb4b64670a126b8bcbd92814a7b44d3d/_____________________________________________.png)

もちろん本文も、各インスタンス毎に、後から文章を変更することができます（テキストをダブルクリックすると編集モードになります）。

デザインをするときは、上記画像のように、メインコンポーネント専用のフレーム（またはメインコンポーネントだけを集めたフレーム）を用意しておくとようでしょう。そうすれば、差し替えの際に、誤ってメインコンポーネントをいじってしまうことを防げます。

#### Figma コンポーネントのショーカット
「コンポーネントの作成」及び、「インスタンスの切り離し」は、以下のようにショートカットキーを用いて行うこともできます。

- コンポーネントの作成は、「Command + Option + K」
- インスタンスの切り離しは、「Command + Option + B」

### バリアントの使い方
Figmaでは、「バリアント（variants≒バリエーション）」という機能を使うことで、「あるコンポーネントのバリエーション」を一括管理することができます。例えば、以下のようなものがあります。

- 「通常」「ホバー時」「クリック時」のボタン色のバリエーション
- 「デスクトップ」「タブレット」「モバイル」におけるヘッダー表示項目のバリエーション

では、例として色のバリエーションを含むボタンを作ってみましょう。

1. ボタンデザインをコンポーネント化する
　（バリアントは「コンポーネントのグループ」なので、まず元の要素をコンポーネント化します）
2. 「バリアントの追加」をクリック
![バリアントの追加](//images.ctfassets.net/2kcyx6q7ww5g/1S01LXBHvhCQaxgBsjetj4/2eb800e3b7dc9f8d68224fa78e40385d/___________________________.png)

各ボタンのスタイルにバリエーションを加えます。スタイルは通常の方法でデザインタブから変更することができます（バリエーションを含む３つのボタンをまとめてメインコンポーネントという扱いです）。
![バリアントへのスタイルの追加](//images.ctfassets.net/2kcyx6q7ww5g/1pqv03WMOsLY1yfYfKZHI0/b9964b2095f701c49d3aad6bed72face/_____________________________________________.png)

バリアント化されたコンポーネントを使う場合も、「アセット」からドラッグ＆ドロップでOKです。
![バリアント化されたインスタンスの追加](//images.ctfassets.net/2kcyx6q7ww5g/gvfW4HyJYTLHMkRiJhtj9/73f87421e44f6b344c94f2403e0f36c1/_________________________________________________________.png)
すると、「デザイン」タブからバリアントの選択ができるようになるので（まだそれぞれのバリアントがデフォルト名ですが）、色違いのボタンに入れ替えることができます。

#### バリアントの管理
先程までは、コンポーネントやプロパティの名前がデフォルトのままでしたので、少々分かりづらかったですね。そこで、バリアントをプパティ名で整理してきましょう。

まずメインコンポーネント（下記の例では３つのバリアントを含む）に名前を付けます。

次に、「デザイン」タブの「プロパティ」より、「プロパティの編集」をクリックします。そして、「（プロパティの）名前」と「値」をそれぞれ入力していきます。「名前」と「値」に何を入れるかは、以下の例を参考にしてください。

- 名前：色　　　　値：赤・青・黄・緑…
- 名前：大きさ　　値：大・中・小
- 名前：デバイス　値：PC・タブレット・モバイル
- 名前：状態　　　値：通常・ホバー・クリック
![プロパティの編集](//images.ctfassets.net/2kcyx6q7ww5g/2glOQXjucFb5kfxqfy65Xq/0f3640c45960835c2d30cf2e89cca87f/______________________________.png)

バリアントをさらに増やした例がこちらです。選択されたボタンには、「色ー黄色、大きさー小」と表示されており、2つのプロパティが設定されていることがわかります。
![バリアントを増やす](//images.ctfassets.net/2kcyx6q7ww5g/poOnzGEEj6dSJvQTA1lZO/835372893f3710c6d2c346eb81dc779e/______________________________.png)

#### プロパティの追加・変更
プロパティを追加する時は、「プロパティ」項目の「＋」マークから「バリアント」を選ぶと新規プロパティ作成画面が現れます。

また、ある要素を選択した状態で、「値」にカーソルを合わせると「メニューマーク」が現れるので、これをクリックすることで別の「値」に変更したり、「値」を新規追加することができます。

「値」として表示されている文字自体をクリックすると、それを編集できるモードになります。
![値の編集](//images.ctfassets.net/2kcyx6q7ww5g/bKlQOcMjP9YPj9uGSQYbi/cf88b697b0feaec48b12a39cc0fa3662/____________.png)
「色」「大きさ」といったプロパティ名も、それをダブルクリックすると編集できるようになります。