🌐
【日本語】WebflowチュートリアルStep1(画像付き)
Webflowとは
最近流行っているノーコードでwebサイトが作成できるツールです。
直感的に操作ができる事と、豊富なテンプレートが用意されている事が魅力です。
より自由に作るには多少のhtml/cssの知識は必要だと思います。
はじめに
このチュートリアルは2021年1月10日に書いたものです。
現在のチュートリアルとは違う箇所があるかもしれませんが、ご容赦下さい。
また、画像が多いため、Step毎にチュートリアルの記事を分けようと思います。
チュートリアル
1.まずは会員登録
2. ユーザー名を決める
3. いくつかの質問に答えていきます
あなたの職業は？
- webデザイナー
- プロダクトデザイナー
- 開発者(デベロッパー)
- マーケター
- 企業家
- その他
誰のためにサイトを作成しますか？
- フリーランスとしてのクライアント
- 代理店の一部としてのクライアント
- 自分が働いている会社
- 自分のビジネス
- 自分自身
あなたはwebサイトの開発経験がありますか？
- 全くない
- webサイトビルダーなら使った事がある
- 少しだけある
- エキスパート
今日は何を作りますか？
- ビジネスサイト
- ECサイト
- ポートフォリオ
- ブログ
- その他
- Webflowをテストしているだけです
読み込み中...
読み込み完了
ステップ1
2カラムのシンプルなレイアウトを作っていきます。
エレメントパネルをクリックします
ContainerをドラッグしてCanvasにドロップします
ドラッグ&ドロップするとこのような見た目になり、目に見えない線で要素を並べていきます。
全ての要素はボックス(箱)として扱い、ボックスを入れ子にすることもできます。
エレメントパネルからカラムのレイアウトをドラッグして先ほどのContainer要素にドロップします
Headding(<h1>~<h6>のタグ)要素を左のカラムにドラッグ&ドロップします
Headding要素をダブルクリックしてテキストを編集します
今回は試しに「Help your team do great things!」と入力します。
Paragraph(<p>タグ)要素を先ほどのHeadding要素の下にドラッグ&ドロップします
Paragraph要素をダブルクリックしてテキストを編集します
今回は試しに「Build amazing websites while juggling everything else」と入力します。
Button(<button>タグ)要素をParagraph要素の下にドラッグ&ドロップします
Button要素をダブルクリックしてテキストを編集します
今回は試しに「Get Started」と入力します。
Assetsパネルから画像を挿入します
hero.pngの画像を右のカラムにドラッグ&ドロップします。
これでステップ1のチュートリアルは終了です。
Discussion