1Days|未経験から21日間でポートフォリオを作るWebflow教材

くりたまさと
Masato Kurita
栗田将人
1Days|未経験から21日間でポートフォリオを作るWebflow教材

こんにちはWebflow専門家のマサトです。

このコースではWebflowを使用して1日30分、21日間かけてウェブ制作を行います。手順通りに進めるだけでWebflowの使い方を学びつつ、独自のポートフォリオサイトを作ることができます。また完全未経験の方を対象に専門用語はゼロで解説するので「ウェブ言語って何?」という方でも基礎から学ぶことができます。

✅このコースに向いている人

  • これからWebflowを覚えたい
  • HTML、CSSの知識はゼロだけどWeb制作を覚えたい
  • Webflowでサイト制作できるようになりたい

また動画でも解説しているので文章と合わせてご覧ください。以下は1日目。その前にもっと基礎の知識「知らなきゃ損する!Webflowの操作が10倍早くなる基礎知識!」を公開しました。合わせてご覧ください。

✅この記事・動画の内容は以下の通りです。

  1. 全体像の把握、このコースでは何を学べるのか
  2. 事前準備(素材のダウンロード)
  3. 要素を追加し、スタイルを変更する
  4. Webflowに日本語フォントを追加、変更する方法

さっそく作っていきましょう!

目 次

Webflow日本語化|全体像の把握、このコースで何を得られるか。

全体像の把握

はじめに今回作るウェブサイトのデザイン確認をしていきましょう。今回作るのはこちらのサイト↓公式サイトから確認しましょう。動画ではリンクにアクセスできなかったですね。修正されていることを願います。

今回作るウェブデザイン

このコースで何を得られるか。

このコースではWebflowを使った基本的なウェブ制作からCMS構築、SEO基礎、お問い合わせの作成、グーグルアナリティクスの連携、お問い合わせフォームの作成までWeb制作に必要な知識の全てを学ぶことができます。今回のコースを全てマスターすればおおよそ基本的なWebflow操作は理解していると言ってもいいでしょう。また「ホームページを作れます!」と言っても過言ではありません。

あとは必要に応じて自分で調べる力があればWebflow構築を行うことができます。WebflowはHTML、CSSなどのコードを出力することもできるので、Webflowを理解すれば、たった21日でコーダーになれると言っていいでしょう。

そのため、21日終了後はWeb制作のスキルではなく、他のスキルを身につけることをお勧めします。(デザインやマーケティングなど。)

たった21日でWeb制作のスキルを手に入れ、即座に次のスキル習得に行く。これは現代最速のスピードと言えます。

Webflow日本語化|事前準備(素材のダウンロード)

今回は使う画像やアイコンはWebflowの公式ホームページからダウンロード可能できます。自分の持ってる画像で作りたいという方や画像集めから実践を意識したい方は自分で用意してやってみましょう。(完全初心者の方は公式ホームページからのダウンロードをおすすめします。)

素材ダウンロードはこちら

実際に訪問してみると、自分が今から何を作るのか明確になります。一度全体像を把握しておきましょう。作るサイトを把握したらレッスン開始です。

Webflowで真っ白のボードを開く

Webflowで真っ白のボードを開く
Webflowのテンプレート選択画面

登録が完了したらダッシュボードを開きましょう。+New project を押すとテンプレートが並んだ画面に切り替わります。一番左端の「BLANK」と書かれたプロジェクトを選択して真っ白の制作ページから製作開始です。

名前設定の画面が出るので、ここは自由に設定します。僕は今回、単純に「ポートフォリオサイト」で作成していきます。

Webflow日本語化|Webflow大学コース開始!

これが制作画面です。まずは左上の「+」をクリックしてSectionを入れていきます。さらにその下にContainer、テキストを配置します。配置したコンテナの中にHeadingとText blockを入れ、、配置した文字をダブルクリックで編集。今回僕は「H1:Kana's portfolio」「Text:リクルーティングライター」としておきます。※各自ご自由にどうぞ。

画像左の「Navigator」を開き、ピン留めして作業をしていきましょう。要素を上記の画像のように配置したら、今度は画面左上の「section」と名前をつけます。これはCSSにおけるクラスと呼ばれるものです。

CSSのクラスとは?

CSSのクラスは、HTMLのタグに名前をつけて、それに特定の見た目を与えるものです。たとえば、クラス名を「red」にして、CSSで .red { color: red; } と書きます。そうすると、そのクラスを持つ部分はみんな赤くなります。HTMLでは class="red" と書いて、これで、「red」と名前をつけた部分が全部赤くなります。

Webflowでは自分で名前をつけないと自動で1.2.3.4と生成されます。完成後にも編集が楽なように事前に名前をつけておきましょう。

CSSには命名規則があります。BEM・OOCSS・SMACSS・FLOCSS・tailwindcssなど様々です。企業就職を考えるのであれば応募要項などからその会社が使用している命名規則を覚えるのが一番効率的でしょう。

寄り道して勉強したくなる気持ちもわかりますが、命名規則を勉強するのは(僕は)あまり楽しくないので、今はスルーしておきましょう。まずは「Webflowを覚える。」と決めて進んでいきます。

SectionにPadding 60pxを上下に設定

Margin、PaddingはCSS用語です。空白を作る機能と考えておいてください。Margin、Paddingは画面右上にあります。

直感で使えるデザインになっているので上下左右、間違う事なく簡単に使いこなせるでしょう。Altキーを押しながら数値を設定すると上下、左右と向かいあわせの面に同じ数値に設定することができます。Shiftキーは全方位指定ができます。

Webflow日本語化|Webflowに日本語フォントを追加、変更する方法

Webflowには日本語フォントが初期装備されていないので、最初に設定しましょう。今回のコースでは一番簡単なGoogleフォントを設定していきます。

自分の好きなフォントを自由にWebflowにダウンロードしたい方はこちら記事をご参照ください。
【全3パターン】Webflowにフォントを追加する方法

クラス名のピンクタグを使う

左でBodyを選択、右のSelectorでピンク色の『Body(ALL PAGE)』を指定しましょう。ピンクのタグは要素ごとの基準の数値を指定できます。

サイト全体で「全ての見出しH1は28pxにしたい」「ページ全体の背景はグレーにしたい」などの場合にはピンクタグと覚えましょう。

typographyからフォントを変更します。最初は日本語フォントがないのでフォント欄の一番上「ADD Fonts」からフォント追加のページを開きます。

今回は定番のNoto Sans JPを使用していきましょう。Google Fontからフォントを追加します。

画像とテキストと色を調整する

こっからはデザインを変更して要素をさらに追加していきます。

バックグラウンドを黒に設定。フォントを白に変更。

Bodyのピンクタグを選択してバックグラウンドを黒にしましょう。それだけでは文字が見えないのでBodyのピンクタグにさらに「テキスト:白」の設定をします。

Text BlockにMax Widthを設定

フォントの設定が完了したらテキストをギュ!とまとめて表示します。(わかりやすいように文章を少し長め変更しました。)

  • 下記画像を参考にMax Width 350px を設定
  • 文章の横幅が小さくなることを確認。

Widthは横幅を設定する機能です。MAX Widthは文字通り、指定した数値を最大値としてそれ以上大きくならない設定をすることができます。今回でいうと、350px以上大きくならない設定をしています。イメージはこんな感じ↓

Webflow内に画像をUP→メイン画像を挿入

最初にダウンロードした画像やアイコンなどを全てアップロードしましょう。

  • 一番左のアイコンから「Assets」を選択
  • ファイルを選択してアップロード

WEBflowデザイナーに画像を挿入

次にメイン画像をドラッグ&ドロップでセクションの中に入れます。今回は全面に広がるように配置をしたいのでContainerの中ではなくSectionに画像を挿入。入れた画像を選択して次の数値を入れましょう。Width:100%、Height:500px、fit:cover。

最後に画像とテキストが近すぎるのでテキストブロックにHERO TEXTとクラス名をつけて、Marginを60を指定したら第一回は終了です。

最後動画での確認もどうぞ、2倍速などで概要だけサクッと確認できます。

Webflow公式の参考元はこちら

無料メルマガで追加情報を告知します。

WEBFLOW専門家として事業を行っている栗田自身が実際に使用し、便利だと感じたWebflowの使い方を共有します。またノマドライフや、事業計画、経験と過程について発信しています。これは僕からあなたへの手紙です。ここでしか贈らない言葉があります。それでは限定メルマガでお会いしましょう。

ご登録ありがとうございます。次回の更新まで少々お待ちください。
なにかしらエラーがでています。治らない場合はXまでご連絡ください。

併せて読むとおすすめの記事▼

Webflow大学|ナビゲーションバーの作成方法を日本語で解説

Webflowでナビゲーション、シンボルを作る方法について解説していきます。「Webflowの始め方を知りたい」「Webデザイナーになりたい」と考えている方やWeb未経験者でも一歩づつ進んでいけるようにWebのことから解説しています。

Read more...

知らなきゃ損。Webflowの操作が10倍早くなる基礎知識

未経験者が10倍効率よくWebflowを学習できるように、Webflowの基本操作に関する知識を紹介します。Webflowの見方、ALLタグの存在、CSSパネルの色の意味など、Webflow初心者に必須の知識をまとめています。特に「Linkの色が変わらない」などのよくある質問に対する解決策も提供。専用の動画も公開しています。

Read more...
🎉【期間限定】無料キャンペーン実施中9/1まで
Beta

無料のWebflow
30分間レクチャー実施中!!

期間限定‼️
Webflowでこのポップアップの作り方わかりますか?このレクチャーではWebflowの使い方、Webflow導入後のサポートなどWebflowに関する質問はOK!完全無料で実施しているのでお気軽にお申し込みください。9月1日まで実施中
※ビデオ通話(Google meet)を使用します。
※予告なく、内容の変更やキャンペーンが終了する場合がございます。
※機密事項などを取り扱う際は事前にお申し付けください。内容はYoutubeなどSNSに 露出する場合がございます。お申し付けいただければ露出はしません。
※レクチャー時間は一組30分までとさせていただきます。それ以上は別途ご相談、ご依頼ください。30分の中に自己紹介や案件の相談時間などは含まれていませんので慌てずまずは自己紹介から行いましょう。
※自己紹介など含め45分を想定しています。
※ご予約機能はGoogleカレンダーで作成しています。
※こちらはベータリリースとして行っています。
※Webflowを学ぶ目的、サイト制作依頼の相談、Webflowサポートのお試し、以外の目的でのお申し込みはおやめください。
以上の注意事項の他に必要な情報は都度更新、変更していきます。
Dashboard mockup