ノート一覧

キーワード検索

絞り込み条件:
Tag
close icon

「記事を削除せずに保存しておきたい!」そんな場合に使えるアーカイブ機能をご存じですか?

アーカイブ機能を使うと、公開が終わったコンテンツとして、共同編集者にも分かりやすい形で目印をつけ、ウェブフローのデータ上に残しておくことができます。

コンテンツ(記事)のアーカイブは以下の手順で可能です。

記事のアーカイブの方法

ページをスクロールしてページ下部までいくと、「アーカイブ(Archive)」のボタンがあります。

アーカイブボタンを押すと記事一覧に戻ります。表示がアーカイブになっているか確認して下さい。

アーカイブされた記事は、記事の公開ボタンが選択されなくなりなくなりますので、編集ミスで誤って公開されてしまう心配がありません。

アーカイブされた記事は公開ボタンが選択できなくなります。

アーカイブの解除

もし再公開したい場合は、アーカイブを解除し記事を「下書き」に戻してから編集してください。アーカイブの解除は同じく記事ページ下部のボタンから行えます。

サイトの公開は、「記事の自体の公開準備作業」と、「サイト全体の更新作業」の2段階を経て公開になります。以下の手順で記事を公開しましょう!

1. 記事の公開準備

それぞれの記事ページにはページ右上に緑色の「保存」ボタンがあります。保存ボタンの「↓」を押し、希望の公開状態を選択してください。

プルダウンで保存状態が選べます

プルダウンを選択すると自動的に記事一覧のページに戻ります。

ここで、編集をした記事の状態(ステータス)が「公開準備完了(Staged Changes)」になっているか確認してください。

これで記事の公開準備は完了です!次に、サイトの公開(更新)作業をしていきましょう!

2. サイトの公開(更新)

トップページまたは上部の青い「保存」ボタンを押します。

公開ボタンを押すと、更新待ち内容が確認でき、確認ボタンが出てきます。出てきた更新ボタン「公開(Publish Change)」を再度押して下さい。

これで、自分が変更した内容も他の共同編集者が変更した内容全てのサイト内の全変更・更新待ちの内容が公開されます。

実際にサイトに変更が反映されているか確認してみましょう。

※注意
いかなる場合においても、編集された内容は自分または他の編集者が”サイト全体の”公開ボタンを押すまでウェブサイトには公開されません。変更を加えた場合は”サイト全体の更新ボタン”を押す作業を忘れずにセットにしてください。

3.記事の公開状態(ステータス)について

記事の公開状態には4つの状態があることを憶えておきましょう!

「公開(sataged for publish)」

→記事を公開準備状態にします。

「下書きとして保存(save the draft)」

→記事を下書きとして保存します。

「非公開状態に戻す(unpublish)」

→一度サイトに公開されている記事を非公開状態に戻すことができます。

「公開予約(schedule)」

→押すとカレンダーが表示され、好きな日付を指定し先の予定で公開することができます。

最初は慣れが必要ですが、記事ステータスを上手に使い分けて活用していきましょう!

まず、メニュバーから「ページ(pages)」のボタンを押します。ページを開くとサイトが全部で何個のファイルで構成されているか見る事ができます。この中の「固定ページ(Static pages)」の中から編集したい固定ページを選んでください。

固定ページを開くと、管理画面上に実際にユーザーが見るデザインのままページが表示され、直接編集ができます。

ページ上に含まれる画像や文章にカーソルを合わせると、薄くその部分が囲まれ、右上に鉛筆マークが表れます。枠内をクリックして文章を変更してみましょう。

文章や写真の差し替えが終わったら、画面右下にある「公開(publish)」ボタンを押します。

公開ボタンの色が緑色に変わり「Published(公開完了)」の表示が出たら編集完了です。

実際のウェブサイトで表示が問題ないか確認しましょう!

メニューバーから「データベース」を選びます。データベースには一定の”まとまり”があり、専用の投稿フォームを持つページが保管されています。

例えば、ブログ記事、カテゴリ、ギャラリーページがデータベースページに該当します。

データベースのページには、投稿フォームからの編集と、管理画面からの直接編集の2通りの編集方法があることを憶えておきましょう!

1.投稿フォームから編集する方法

メニューバーの「データベース」から編集したいページを選びます。

投稿フォームは要望に合わせてお作りするため、入力欄が異なります。

画像の編集は「画像の変更」ボタンから差し替えることができます。

カーソルを合わせて文字の編集ができます。文字の大きさや太さを変えたい時はクリック&ドラッグで右クリックを押すと、タイトルの大きさ変更などができるボタンが現れるのでこちらから変更して下さい。

内容の変更をしたらメニューバー右上の「保存」ボタンを押します。

メニューバーの「公開」ボタンを押してサイト反映が完了です。

2.管理画面でデザインを見ながら直接編集する方法

2つ目の方法として、管理画面のキャンパス上で編集したいページを開くことで、実際のサイトでの表示を見ながら、パワーポイントの資料の画像や文字の変更と同じくらい簡単に内容を差し替えることが可能です。

まずは、管理画面上で編集したいページを開いてみましょう。例として事例紹介のページを開いてみます。

画像のアイコン、または差し替えたい画像にカーソルを合わせクリックすると、画像選択のフォルダが出てきます。こちらから差し替えたい画像を選ぶことができます。

文字上にカーソルを合わせると、枠が表示されます。編集したい文字上をクリックすると、文字入力が可能になります。文字の大きさや太さを変えたい時はクリック&ドラッグで右クリックを押すと、タイトルの大きさ変更などができるボタンが現れるのでこちらから変更して下さい。

編集が終わったら「公開」ボタンを押します。

公開ボタンを押すと変更内容の確認ボタンが出てくるので内容を確認し「Publish Changes」をクリックします。これで編集とサイト反映が完了しました!

基本的に使い易い修正方法を選んで大丈夫ですが、オススメは、大枠の文字の打ちだしや内容構成には投稿フォームを使い、最終の誤字チェックや画像のバランスを見たい際に管理画面上で直接編集すると、作業がスムーズです。

データベースのコンテンツは、フォームやページデザインの雛形は開発者が作るものですが、ページの追加や内容編集は編集者で行うことができます。

基本的に手順は記事の作成と似ていますが、一通りの手順を確認しましょう!

データベースページの追加

1.画面のメニューバーからデーターベースページを開き、編集したいコンテンツを選びます。

ここでは例で「制作事例」のページをクリックして開きました。

右上に新規コンテンツ作成ボタンがあるため、クリックしてください。

編集画面が開きます。このページはクライアントごとに製作者が作るため、フォームの入力項目は異なります。

赤い「*」マークは必須入力項目です。必須項目を入力したらクリエイトボタンを押します。

「クリエイト」ボタンの「↓」を押し、プルダウンで「下書きとして保存」を選びます

データベースページの公開

再度プロジェクトを開きます。

保存ボタンの隣にある「↓」ボタンからプルダウンで「公開準備状態に戻す」を選びます。

表示が「Staged for publish」に変わったのが確認できます。

公開ボタンを押します。

変更確認の表示が出るため、再度「公開(Publish Changes)」を押して公開完了です。

固定ページの作成にはHTMLとCSSの知識が必要のため、新しいページを作成したい際はお問い合わせください。
すでに作られた固定ページの編集をしたい場合は、次の記事をご参照ください。

記事を削除したい時は以下の手順で削除が可能です。

※注意
一度削除した記事はいかなる方法でも元に戻すことができません。削除間違いがないようにご注意ください。

記事の削除

1.ページ一覧を開く

2.削除したい記事をクリックして開きます。ページを下にスクロールしていくと「Delete」というボタンがあります。

3.「Delete」を押すと確認画面が出てきます。再度赤い「Delete」ボタンを押して削除完了です。

記事の一括削除

記事を複数まとめて削除したい場合は、一括で削除する方法もあります

1. メニューバー右上にある「選択(セレクト)」ボタンを押します。

チェックボックスが表示されます。削除したい記事にチェックを入れて下さい。

2. チェックボックスにチェックを入れるとゴミ箱の「削除」ボタンが赤く変わるので押してください。

3. ゴミ箱の「削除」ボタンを押すと、再度確認画面が表れます。記事数などを確認の上、削除ボタンを押して下さい。

これで選択した記事の一括削除が完了しました。削除した記事は元に戻りません。削除はもちろんですが、一括削除は特に慎重に行って下さい。


Barrett Johnson

この記事は、CSS tricksの創設者であるChris Coyierへのインタビューに基づいています。インタビューの全文とデモは下記からご覧ください。


Web開発でなぜWebflowなのか?

フロントエンドの開発者であれば、"なぜウェブフローなのか?"と疑問に思うかもしれません。この記事では、ウェブフローを使ったビジュアルコーディングを始めるべき7つの理由を紹介します。

1.プロフェッショナルのために作られたツール

ウェブフローはコードの力を視覚的なキャンバスに取り込み、デザインすることで、コードを使わずウェブサイトを構築することができます。
lattice's 2020 home page
人材系スタートアップのLatticeは、Webflowを利用して制作マーケティングサイトを構築し、ハンドコーディングの開発作業に頼らずに更新を行っています。

開発者がすぐに理解できるウェブフローのUI(ユーザーインターフェイス)

Webflowの導入で難しいのは、他のプロフェッショナルなデザインツールと同じように、使いこなすまでに多少の学習が必要なことです。
特に、HTMLやCSSの基礎を学んだことのないデザイナーやマーケティング担当者であれば、なおさらでしょう。しかし、これらHTMLとCSS の知識をすでに持っている開発者にとっては、ウェブフローを理解するのは簡単です。

ウェブフローの UI は HTML と CSS のコントロールに直接対応しており、左側に要素(例:div ブロック、リンク、テキスト)、右側に CSS のスタイリングコントロールがあります。つまり、コードエディターで CSS を記述するときと同様のメンタルモデルをウェブフローで構築するときに使用することになります。

webfow's designer UI
ウェブフローは、HTMLとCSSを視覚的なUIで表現します。div、リンク、テキストなどのWebプリミティブを左からドラッグし、右からクラスと実際のCSSプロパティでスタイルを指定します。

また、UIコントロールはHTMLやCSSに直接マッピングされ、クラスを使って構築するため、ウェブフローサイトの背後にあるコードは、手でコーディングするのと同じくらいクリーンです。

radial gradients in Webflow
放射状グラデーション:ウェブフローでは楽しいが、CSSを手書きする場合はあまり楽しくない。

この機能は、CSS を覚えるのが大変なスタイルを作成するときに特に役立ちます。たとえば、デザイナーが大好きだと思われる放射状のグラデーションをボタンに付与する場合などです。

2. クラスと再利用可能なスタイルが魅力

CSS の力を借りてウェブフローで要素を視覚的にスタイリングすることは素晴らしいことですが、それらのスタイルをサイト全体で再利用したり更新したりしたい場合はどうしたらよいでしょうか。CSS のように、ウェブフローはクラスをコアコンポーネントとして構築されています。つまり、ウェブフローはサイトの構築だけでなく、保守や更新も簡単に行えるということです。

CSS スタイリングは、デザインにおけるビジュアルの見栄えに影響を与えます。ウェブフローでは、これらのCSSスタイリングをコードで変更する負担がありません。サイト全体の変更も、ビジュアルなインターフェースで簡単に行えます。各要素にスタイルを設定し、変更すると、その変更が瞬時に反映されます。特定の要素に対してサイト全体の CSS スタイルを作成することも、必要に応じて個々の要素を完全に制御することも可能です。

editing styles in Webflow
クラスでスタイルを編集し、そのクラスを使用しているすべての要素を更新します。これで CSS が完成です。

3. フレックスボックスや CSS グリッドのような最新のレイアウト ツール

ウェブフローでビジュアルに作業することは、レイアウトの選択肢が制限されることを意味するものではありません。それどころか、ウェブフローはフレックスボックスや CSS グリッドのような最先端のレイアウトシステムを第一級の市民として扱い、好きなようにサイトを構築するための完全なコントロールが可能です。

css grid in a visual canvas
FTPや煩わしい設定もなく、クリックするだけで公開できます。

4. ワンクリックでパブリッシング

ウェブフローは、単に視覚的にコードを書くだけでなく、パブリッシングとホスティングのプラットフォームとして組み込まれています。つまり、ゼロからウェブサイトを公開するまでにかかる時間は、手作業でコーディングする場合の何分の一にも満たないのです。視覚的にデザインを構築したら、公開をクリックし、サイトをライブでプッシュすることができます。

publish in Webflow with one click
No FTP, no annoying setup — just click to publish.

5. WordPressより柔軟で強力なCMS

lattice's resources for humans magazine
 Lattice はウェブフローを使用して、カスタムコンテンツマーケティングハブ "Resources for Humans" を構築しています。

ウェブフローのCMSは、ウェブフロー特有のビジュアルデザインコントロールと、特定のフォーマットや投稿タイプに縛られないCMSの柔軟性を組み合わせた、非常に柔軟で強力なツールです。ウェブフローでは、サイトが必要とするあらゆる種類のコンテンツを自由に作成し、そのコンテンツを中心にデザインをゼロから作り上げることができます。

cms collections in Webflow
WebflowのCMSでは、カスタムフィールドを定義し、それらのフィールドをデザインテンプレートに直接接続することができます。

コンテンツ・エディターの視点から見ると、Webflowサイトのコンテンツの編集や更新は、簡単かつ直感的に行うことができます。Webflowのエディターは、同僚やクライアントがページ上でコンテンツを編集・更新するためのシンプルなUIを提供し、煩雑なダッシュボードにログインする必要がなく、パブリッシングを過度に複雑化させません。

6. 完全にカスタム化されたインタラクションやアニメーションの構築

okalpha's website built in Webflow
代理店Ocalphaのホームページは、スクロールベースのアニメーションを使って目立たせています。

Webflowのインタラクション&アニメーションツールでは、以下のような一般的なトリガーに基づいてアニメーションを制御することができます。

  • ページのロード
  • クリック
  • ホバー
  • スクロール位置
  • マウスの位置

... などなど

これは、HTML や CSS には慣れているが、JavaScript の複雑さに頭を悩ませている(あるいは勉強を遅らせている)ウェブサイト開発者にとって、特に素晴らしいニュースです。ウェブフローは、Webサイトのアニメーションやインタラクションのパワーを直接ビジュアルツールボックスに取り込み、Webデザインのこの領域全体をより視覚的にクリエイティブでアクセスしやすくすることを目的としています。

7. Webflow University で学習できる

ウェブフローのようなプロフェッショナルグレードの新しいツールを学ぶのは大変なことですが、私たちはそのことを理解しています。Webflow Universityでは、そのような学習プロセスを楽しく、親しみやすいものにするために、最高の教育用ビデオと教材を作成するために多大な投資を行ってきました。

最後に:デザイナーとデベロッパーはコードを書くべきだ - ただし視覚的に

一日の終わりに、私はよくWebflowをコーディングの別の方法と表現します。デザイナーはコードを書くべきか」という昔からの疑問が出てきたとき、私は「そうだ、デザイナーはコードを書くべきだ - ただし、視覚的に」と答えるべきだと思います。

Webflowのテーゼは、デザイナーは仕事をするために複雑な視覚的ツールを学ぶことに慣れているが、ウェブデザインの領域では、制作に特化したツールは皆無に等しい、というものです。
Webflowは、フロントエンドの開発をビジュアル化することで、このギャップを埋めようとしています。つまり、Webflowのデザイナーはコードを書いていなくても、Web制作を考える際に同じメンタルモデルを経由して、デザインするメディアを直接操作していることになるのです。
最終的には、デザイナーと開発者が共通の言語を話すようになり、その結果、より速く製品を出荷できるようになるのです。

コードを一行も書かずに、完全にカスタム化された、制作に適したウェブサイトや、超高忠実度のプロトタイプを構築することができます。ウェブフローだけです。


Kiyo Wiesnoski

Digital Media Analyst


デジタルマーケティングの世界では、Googleの一般検索でランクインするためにはワードプレスが必要だという考えが広まっています。今回紹介するのはウェブフローに移行することに成功し、その過程で行ったSEO対策の改善方法です。

2019年1月3日、ラスベガスに拠点を置くウェブデザイン会社「アドラバ」は、ウェブフローで新しいウェブサイトを立ち上げることを一括して決定しました。これまでのウェブサイトはすべてワードプレスを使用していたので、SEOの観点から移行がスムーズに行われるようにすることが課題でした。

そこで、サイトSEOの主要な要素をリストアップし、プロセス進捗を追跡したところ、1ヶ月後に以下の導入効果が起こりました。

オーガニック検索のトラフィックが増加

当社ウェブサイトの一般検索に関するGoogleアナリティクスレポートを調べ、新しいウェブサイトの立ち上げを宣伝する広告、キャンペーン、ソーシャルメディアの投稿を除外して調査してみました。

一般検索トラフィックは、何人のユーザーがサイトを見つけたかだけでなく、そのユーザーがウェブサイトを有益に感じたかどうかも知ることができるため、SEOの重要なパフォーマンス指標(KPI)として有用です。

言い換えれば、適切なユーザーにリーチできているかどうかを判断するのに役立つのです。

Analytics graph for January 2019 showing a rise in metrics like users, new users, and pageviews.

ウェブフローを使用してリニューアルした1ヵ月後には、ほぼすべての一般検索の指標が改善され、場合によっては劇的に向上しました。

全体として、ほぼ全面的にパフォーマンスが向上しました。特に直帰率は、新サイトの立ち上げ後、20%減少しました。この指標は、訪問者が当社のウェブサイトを訪れた際に、探しているものを見つけることができたかどうかを示すもので、非常に重要です。

当社は主にB2Bのプロフェッショナル・サービスを提供しているため、デスクトップからのトラフィックが一般よりはるかに多いのですが、オーガニック検索のトラフィックをデバイスの種類でセグメントすると、モバイルとデスクトップの両方で直帰率が改善されることが確認できます。


一般検索からの直帰率が16%以上低下しました。

一般検索キーワードでの順位が30%上昇

2018年の10月頃に特に不安定なGoogleアップデートがあり、当社の事業サービスやキーワードターゲットのシフトと相まって、当社ドメインのキーワードランキングに少し変動がありました(新しいウェブサイトではSEOに注力することがより重要になりました)。

最も低いときには、406の一般検索キーワードでランクされていました(これは、122キーワード、つまり30%の増加です。

Webflow - WordPressに代わるモダンなツール

カスタム、レスポンシブ、セキュアなサイトを短時間でビジュアルに構築できます。

Webflowの詳細


ウェブフローの主要な SEO 要素はどのように処理されるのですか?

ウェブフローのデザイン変更と移行を経て、サイト内SEOの主要な要素を実装する際に、いくつかの細かい違いがあることに気づきました。幸いなことに、私はこれらの詳細についてメモを取ったので、あなたがそれをする必要はありません。これは決して完全なチェックリストではありませんが、正しい方向性を示すのに役立つはずです。

1. メタタイトルとディスクリプション

メタタイトルとメタディスクリプションについては、ウェブフローと他の主要なCMSの間で大きな違いはありませんが、デザイナーにとって重要なことは、フィールドを追加し、対応するオプションをフィールドに関連付ける必要があることです。

デザイナーではなく、編集者がタイトルと説明を追加する場合は、特に重要です。

2. オープングラフの設定

Open Graphの設定を放置している方、WordPressに画像を選ばせている方は、Webflowで画像、タイトル、説明文を指定するようにしましょう(もしくはSEO設定に合わせた設定を選択する)。 

特にブログでは、Open Graphの画像が指定されていない場合、Wordpressは通常「注目の画像」を使用するため、これは重要です。ウェブフローで画像を指定しない場合、ソーシャルメディアに共有する際にプレビュー画像が表示されません。

Screengrab of Facebook post. Facebook user caption reads, "Don't forget to add you Open Graph Images" on a link with the title, "Web Design & Software Development Portfolio | Adlava."

3. 301リダイレクト

どのCMSを使用していても、ウェブサイトを再設計すると、変更されるページや削除されるページが出てくる可能性があります。ユーザーが壊れたページにアクセスするのを防ぐために(そしてバックリンクの損失を最小限に抑えるために)、既存のウェブサイトをクロールし、301リダイレクトを適切に設定することを忘れないでください。CSV アップロードのオプションはありませんが、類似の形式を共有する URL のグループをリダイレクトするルールを使用することで、Webflow でネイティブに処理されます。

4. Robots.txt とサイトマップ

Robots.txtとXMLサイトマップは、どちらもWebflow CMSでネイティブに処理されます。Webflow Universityでは、この2つに関する優れたリソースを提供していますが、重要なことは、サブドメインや開発用ウェブサイトが検索エンジンにクロールされないようにすることです。robots.txt を使用してクローラーをブロックまたは許可し、通常通り Google Search Console で XML サイトマップを送信してください。

5. GoogleアナリティクスとGoogleタグマネージャ

Google Tag Managerの個人的な支持者として、私はTag Managerのルートを進み、Google AnalyticsとGoogle Tag Managerを統合することを強くお勧めします。この方法については、Webflow Universityで詳しく説明されています。Google Analyticsのルートを選択した場合、WebflowにはプロパティIDをプラグインするための指定された場所があります。

6. GoogleとBingの検証

通常、Google AnalyticsやGoogle Tag Managerの検出による検証を行っている場合は、特にGoogleサイトの検証に注意しましょう。

前項のWebflow Universityのリンク集でも紹介されていますが、Google Tag Managerはカスタムコードのヘッドとフッターの部分に追加することが可能です。これはGoogle Tag Managerの導入には有効ですが、この方法でサイト検証を行った場合、Google Search Consoleではスクリプトを認識することができませんでした。

Google Analytics や Google Tag Manager を導入している場合でも、Google Search Console での検証を維持するためには、Webflow の HTML タグメソッドの指定スポットを使用する必要があります。Bingウェブマスターツールの検証には指定スポットはありませんが、head内のカスタムコード部分にHTMLタグを追加することでWebサイトの検証を行うことができました。また、代わりにDNSオプションを使用してウェブサイトを検証することで、これを回避することができます。

7. 画像のaltテキスト

ADA準拠を優先するウェブサイトを管理している場合、あるいは単にアクセシビリティを重視している場合、WordPressにつきもののaltテキストの問題にはお気づきかと思います。具体的には、メディアライブラリで画像のaltテキストを追加した後、ソースコードに表示されないという問題です。幸いなことに、Webflowでは画像のaltタグ付けが非常に簡単であることがわかりました。

良いユーザーエクスペリエンスは良いSEO

アドラバがウェブフローCMSへの移行を決めた主な理由の一つは、デザインの柔軟性が増し、ウェブサイトの変更をより迅速かつ効率的に実行できるようになったからです。

SEOの基本に立ち返ると、良いユーザーエクスペリエンスは良いSEOにつながります。Googleの最終目標は、ユーザーがGoogleで検索を行った際に、ユーザーにとって有益な結果を提供することであることを忘れないでください。特定の技術的な要素のためにユーザーエクスペリエンスを犠牲にしているのであれば、それは良いSEOとは言えません。最終的な目標は、有益なウェブコンテンツを作成することです。上記のヒントは、技術的な実装面をナビゲートするのに役立つはずで、質の高いコンテンツはあなた次第です。



ウェブフローの記事ページには「複製」という機能があります。

複製機能により、タイトルやSEOタイトルなどの形式を残したり、カテゴリを登録したままにしたり、毎回入力する内容を引き継いで記事を書くことができます。

一回一回文字を打つ手間が省け、記事更新のスピードが格段に上がり、見栄えも一定になる為便利な機能です。

※モバイルアプリ版で複製機能はないため、

パソコンのブラウザからアクセスして下さい。

記事の複製


  1. 複製したい記事を開きます。
  2. 記事の1番下にスクロールします。
  3. 「複製する」のボタンを押すと入力した事項がそのままで新しい記事がひとつできあがります。
  4. コピーベースと分かるタイトルをつけて下書き保存をします。
コピーベースを作っておき、次からは再度「複製」をしてから新記事を作っていくと手間が省けます。複製機能を有効に活用していきましょう!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

該当するノートがありませんでした。