違う記事を見る
News Post

Webflowチュートリアル|初心者のためのガイドブック|#01

Webflow

この記事はこんな方におすすめ!

初めてWebflowを扱うデザイナー、またはエンジニア|Webデザイン制作会社|Webflowで運用保守されているビジネスオーナー

この記事を読むメリットは?

Webflowで最初のホームページを作成する方法を学べる。そして、HTMLとCSSを視覚的にコーディングしてWebflowで強力なウェブサイトを構築する方法をしっかりと理解することができます!

全ての目次を開く

まず初めに

最近流行りの「ノーコード」について

コードを使わずにソフトウェアを構築できる技術が次々と登場し、世界では「ノーコード・ムーブメント」が叫ばれています。

しかし、コードはインターネットの中核の役割を持っているので、ウェブサイトやアプリを構築するためにコードは必須です。そのため、ノーコードとは、「コードを使わずに開発する」ということではありません。

このムーブメントは、コードをビジュアル化(見える化)することで、より簡単に(そしてより速く)コードを書くことに焦点を当てられています。

つまり、デザインするだけで、Webflowのようなプラットフォームがコードを書いてくれるのが「ノーコード」ということです。

Webflowでは、「基本的なコードに基づいてデザインする」という意識で制作に取り組めば、すぐに習得することができます。そして、その上でコードの書き方も学ぶことができるかもしれません!

Webflowとは?

Webflow(ウェブフロー)とは、デザイン、ウェブ開発ツール、eコマース、CMS、ホスティングを一つにまとめたプラットフォームです。

プラットフォームの各機能は、特定の製品 / 機能セットによって表現されています。

機能 ( 1 ) |Designer(デザイナー)

今までの常識とベストプラクティスに基づいたビジュアルWebデザインツールであるDesigner機能では、デザイナーが設計したデザインを、シームレスにクリーンな制作に適したHTML、CSS、JavaScriptに変換することができます。

つまりデザイナーが、品質を落とすことなく、慣れ親しんだ方法(つまり感覚的に、直感的に)Webサイトを開発できるのがWebflowです。

プロトタイプ作成が中心の方は、デザイナーだけでプロトタイプをエンジニアと共有して再現したり、コードをエクスポートしたりすることもできます。

しかし、Webflowを最大限に活用するためには、DesignerとCMS、そして当社のホスティングを組み合わせる必要があります。

機能 ( 2 ) |CMSについて

デザイナーと同様に、CMSもまた、ノーコードのウェブ開発ツールです。

CMSには、インデザイナーの要素(サイトデザイナーが作業する場所)とオンサイトの要素(クライアントやコンテンツマネージャーが作業する場所)があります。

後者の要素をEditor(エディター)と呼んでいますが、これについては後ほど説明しますね

今のところ、デザイナーでは、CMSはモジュール式の「フィールド」を組み合わせることで、ブログ記事や製品ページなど、何度も公開するコンテンツタイプを構成できることを覚えておいてください!

コレクションと呼ばれるコンテンツタイプを作成したら、デザイナー機能よりコレクションのアイテムをサイト上で、どのように表示するかをオリジナルで設計することができます。

個々のブログ記事の表示方法etc.

機能 ( 3 ) |Eコマースについて

WebflowのEcommerceでは、デザイナーとCMSの力を合わせて、オリジナルにカスタムされたEコマースを作ることができます。

WebflowのプロジェクトであればどのようなものでもECサイトにすることができますが、ホスティング料金は通常のWebサイトとは若干異なります。

ECサイトは、Stripe、Apple Pay、Paypal、Google Payなどの決済ゲートウェイと接続できるほか、さまざまな統合機能によって店舗の機能を拡張することができます。

機能 ( 4 ) |ホスティングについて

Webflow のパズルの最後のピースは、ホスティングプラットフォームです。Amazon Web Services (AWS)とFastlyに支えられたこのプラットフォームは、非常に高速で信頼性が高く、エンタープライズグレードのセキュリティを備えており、以下のような最高の機能を利用するために必要となります。

  • CMS
  • Eitor(エディター)
  • フォーム管理
  • レスポンシブ画像(デバイスごとに画像のサイズを自動的に変更し、パフォーマンスを向上させる)
  • 無料のSSL/HTTPS (サイトのセキュリティを向上させます。Googleは基本的に訪問者の情報を入力するサイトには必須としています)