ノーコードでウェブサイト作成
Webflow
(ウェブフロー)
の使い方 講座

「自分のアイデアで
"自由に"
ウェブサイトを制作したい。」

従来、自分でウェブサイトを制作するためにはプログラミングを習得するか、自由度の少ないテンプレート化されたWebサイト制作ツールを選ぶといった選択肢しかありませんでした。しかし、そのような状況はノーコードツールの登場によって、大きく変わっています。

ノーコード ツールとは

プログラマーがコードを書く代わりに、視覚的に操作できるグラフィカル・ユーザー・インターフェースを使ってソフトウェアを開発する仕組みです。つまり、あなたがシンプルなドラッグ&ドロップの操作を行うだけで、ノーコードツールがその操作をコードに変換し、モダンなアプリやウェブサイトを構築できるようにするものです。 コードを書くノウハウを持たない多くの人にとって、ウェブアプリを作ったり、ウェブサイトを構築したりすることは永遠に手の届かないことのように思えます。しかし、今では誰にでも開かれています。ノーコードツールの登場によって、プログラミング言語を知らなければならないという壁を取り除き、誰もが自分のアイデアを実現できるようになりました。

Webflow (ウェブフロー)とは

ノーコードの開発プラットフォームである「Webflow(ウェブフロー)」を利用すれば、プログラミングの知識がなくても、誰でも自分のアイデアを世に出すことができます。Webflowは、HTML5、CSS、Javascriptのすべての機能を提供するノーコード開発プラットフォームですが、実際にはこれらのプログラミング言語の知識がなくても、すぐに開発を始めることができます。ノーコードにはすでにたくさんの使用例があります。ウェブサイトの構築だけではありません。モバイルアプリ、ウェブアプリ、音声アプリ、社内ツール、システム統合、タスクの自動化など、さまざまな用途に利用することができます。

Webflowの魅力

Speedy Service Illustration for BuildWeb

迅速なウェブサイトの制作を可能に

Webflowを利用するデザイナーは、HTML5、CSS、JavaScriptのすべてを使ってプロトタイプを作成し、実際に機能するWebサイトを構築することができます。プロトタイプと構築の間のプロセスをなくすことで、より迅速なアプリケーション開発が可能になります。マーケティングチームが他の人に頼らなくても済むようにすることで、ウェブサイトの公開までの道のりをより早く、より簡単にすることができます。製品開発のために開発者に依頼しなくても、デザイナーが必要なフォームを実装することができるようになります。

Low Price Illustration for BuildWeb

ウェブサイトの制作コストを削減

開発者やエンジニアは、開発プロジェクトの重要な役割を担っており、一般的なマーケティングチームのメンバーよりもコストがかかります。そのため、開発者やエンジニアの時間をプロジェクトの工数から取り除くことができれば、時間を節約できるだけでなく、貴重な資金を節約することができるのです。

Seach Engine Illustration for BuildWeb

仮説と検証を高速に実施できる

コストやエンジニアへの依存度が下がることで、ウェブサイトの制作に関する自由度が高まります。このことによって、様々な仮説のもとでいろいろなチャレンジに取り組み、検証結果を見て、さらによりよいウェブサイトを制作するサイクルを高速に実行することができます。ノーコードを採用したアプローチでは、定量的なユーザーデータ、定性的なユーザーインタビューの結果、あるいはチームのブレインストームで出たアイデアなどを、チームが好きなだけすぐに行動に移すことができます。

Webflow (ウェブフロー)はあらゆるタイプのウェブサイトに対応

Webflowは、あらゆるタイプのWebサイトを作成・管理するためのシンプルなインターフェイスを提供します。

フレックスボックスやCSSグリッド、divブロック、ボタンなどの要素を追加できます。見出し、テキストブロック、テキストリンクを追加できます。CMSコレクションの作成と更新 画像の配置、動画の埋め込み、ビジュアルの統合、そしてもちろんレスポンシブ対応も簡単です。すべてはWebflowのビジュアルWeb開発プラットフォームから始まります。

Webflowでは、標準的なWebサイトのデザイン要素をさらに進化させることができます。Webflowのデザイナーは、リッチなアニメーション、マイクロインタラクション、人目を引くトランジションを構築することもできます。スクロールをきっかけに要素が変化するエフェクト、洗練されたアニメーション、多彩なホバーエフェクトなど、あなたのデザインに命を吹き込みます。シンプルで静的なデザインも、アクション満載のデザインも、思いのままです。Webflowはあなたの創造性をサポートします。

Content management system (CMS)対応可能

Webflowでブログを立ち上げることは可能ですが、デザインを作成する以外に、メディア、コメント、ソーシャルシェアなどの追加機能を手動で統合する必要があります。また、カスタマイズの自由度が高い反面、余分な作業が発生し、CMSウェブサイトのホスティングコストが高くなります。

Webflowを使う前にコードを学ぶことが大事

ノーコードツールとはいえ、コードを学ぶことで、より効率的にWebflowを活用できます。Webflowは、ドラッグ&ドロップのインターフェイスであっても、デザインの下で何が動いているのかを隠しません。すべてを支えるフレームワークであるHTMLとCSSのすべてを理解ことができます。

レイアウトに加えた変更は、リアルタイムに生成されるコードに反映されます。コードの仕組みに興味のある方は、Webflowで裏側を覗いてみてはおすすめです。

テンプレートの選択、またはゼロからのスタート

Webflowでは、真っ白な画面からスタートしても、レスポンシブ対応のHTML5テンプレートから選んでも、簡単にスタートできます。

eコマースストアや企業サイト、専門的なランディングページの作成など、あらゆる種類のWebサイトを構築するために、さまざまなタイプやスタイルのテンプレートが用意されています。

テキストの編集

テキストの編集したいときには、変更したいテキストをクリックすることで、テキストの編集モードに切り替わります。フォントは右側のサイドバーから簡単に選ぶことができます。

ウェブサイトのデザイン編集に使用できる機能は右側のツールボックスに表示されています。カラーやボーダー、スペースの調整など視覚的に調整することができます。気になったらボタンがあれば、試してみましょう。すぐに表示に反映されるので、気にいらなければ元に戻すだけです。

画像の差し替え

テキストは変更してみたけど、背景画像も変更したい。そのような場合には変更したい箇所をクリックして右上の筆みたいなマークをクリックしましょう。そうすると背景に設定されている背景画像が表示されますので、ここから変更することができます。

Webflowを使ったウェブサイト制作を
日本語で学べるオンラインワークショップ

最新ノーコードツールで、利用価値の高いWebflowですが、ほとんどのトレーニング情報や資料が英語で発信されていますので、英語という言語が最後のハードルとなっています。そこで、お勧めしたいのが日本語でのオンラインワークショップです。

マレーシア人講師が日本語で教える
Webflowワークショップ

内容
このような方にオススメです
研修方法
Day 1
2 時間

•      ノーコードでウェブサイトを構築できるツール「Webflow」のご紹介
•      Webサイトの基礎講座
•      Webflowの登録の流れ
•      制作するウェブサイトのテンプレートの選択
•      Day2に向けた準備について

Day 2
2 時間

•       WebflowのElementsとLayoutの説明
•       Webflowの初期設定
•       テンプレートの適用
•       Webflowのエディター画面
•       テキストの入力
•       画像を差し替える
•       Day3に向けた準備について 

Day 3
2 時間

•       前回の続き
•       参加者のサイトのレビューと調整
•       デザインの調整
•       問い合わせフォームの設定 

Day 4
2 時間

•      レスポンシブサイトのレビュー調整
•      最終仕上げWebサイトの公開

自分のアイデアで自由にウェブサイトを制作するスキルを身に付けませんか?
たった4回×2時間のWebflowのワークショップでそのスキルを手に入れることができます。

お問い合わせをお待ちしています。