記事一覧
この度、マイナビ出版より2001年から続くWebサイト構築のためのトータルデザイン誌 Web Designing より、
弊社代表 堀尾が取材を受けました。
掲載されている2023年8月号は、「Web制作とノーコードの良い関係」が題材となっており
弊社が活用しているWebflowについて、4ページにもわたりお話しさせていただきました。
多くの方にお手に取っていただけると幸いです。
ぜひ、ご覧ください。
この投稿はWebflow社が提供する「Introducing new keyboard shortcuts for moving elements」の内容を元に作成しています。
引用元：https://webflow.com/feature/keyboard-shortcuts-moving-elements
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
ショートカットで要素の移動を楽にする
今日は、Webflowのキャンバス上で要素を効率的かつ正確に移動するためのキーボードショートカットをご紹介します。
これにより、マウスやナビゲーターの使用を減らすことができて、作業が圧倒的に効率的になりますよ！
要素を移動するための新しいキーボードショートカットはこちら。
![兄弟要素の後ろに移動するには、アップルであればコマンドキーと]、ウィンドウズ、Windowsであればコントロールと]](https://assets-global.website-files.com/5ffc142379487efdb0e5c552/64848a849c85db77bcb9f19a_Group%2083.png)
- 前の要素の前に要素を移動する：[ または Command + 下矢印（Mac）または Control + 下矢印（Windows）
- 前の要素の後ろに要素を移動する：] または Command + 上矢印（Mac）または Control + 上矢印（Windows）
- 現在の親要素内で兄弟要素の前に要素を移動する：Command + [ または Command + 左矢印（Mac）または Control + 左矢印（Windows）
- 現在の親要素内で兄弟要素の後ろに要素を移動する：Command + ] または Command + 右矢印（Mac）または Control + 右矢印（Windows）
- 親要素の前に要素を移動する：Command + Shift + 上矢印（Mac）または Control + Shift + 上矢印（Windows）
- 親要素の後ろに要素を移動する：Command + Shift + 下矢印（Mac）または Control + Shift + 下矢印（Windows）
これらの新しいショートカットコマンドの詳細については、Webflow Universityの記事をご覧ください！
一言メモ
Adobe製品などを使い慣れている方にとっては、レイヤーの移動などが同じ感じのショートカットなので、直ぐに馴染めるのではないでしょうか？
どんどん使って時短に繋げたいですね！
この投稿はWebflow社が提供する「Client's guide to the Editor: Introduction」の内容を元に作成しています。
引用元：https://university.webflow.com/lesson/clients-guide-to-the-editor-introduction
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
エディターでできることの概要
今回は、ウェブサイトのオーナーがログインしてエディターで変更を行い、それらの変更をウェブ上で公開する方法について、詳しく解説します。
ここから始めましょう。
エディターへのの招待が届いたら、リンクに従って、必要なフィールドに入力してアカウントを作成し、ログインします。
するとサイト内へ入ることができ、通常と同様にサイトをナビゲートすることができます。要素や周囲をクリックしたりできます。
ログインしているため、ページの一部のコンテンツが編集可能になっています。
ページの任意の要素の上にマウスを置くと、要素の右上にボタンが表示される場合があります。この場合、テキストを直接ページ上で編集できます。
ボタンも同様です。ここにボタンがあります。リンクの設定（リンク先）やテキスト自体を変更できます。
画像はどうでしょう？画像が編集可能な場合、ボタンが表示され、クリックして選択した画像で画像を置き換えることができます。
ページ上で直接編集するだけでなく、ページの下にあるページリンクを使用してナビゲートすることもできます。これにより、サイト上の任意のページに直接移動できます。
特定のサイトデザインによっては、コレクションやフォームも表示されるかもしれません。
コレクションは、サイト上のコンテンツを整理、編集、追加できるデータベースのようなものです.
フォーム（フォームボタン）を使用すると、サイト上にフォームがある場合にアクセスできます。サイト上でフォームに入力された情報は、CMS内でアクセスできます。
例えば、誰かが私たちのサイトのフォームに記入した場合、その情報はCMS内でアクセス可能です。
最後に、アカウント設定、ヘルプとサポート、そしてログアウトボタンがあります。
また、先ほどいくつかの変更を行った後、公開のオプションが表示されたことに気づいたかもしれません。
サイトで行った変更は、公開するまで実際には公開されません（他の誰もそれらを見ることはできません）。
公開すると、誰でもサイト上の変更を見ることができます。
今後は、既に自分のウェブサイト上にいる場合、アドレスの直後に「？」と「edit」と入力し、Enterキーを押すだけで、簡単にログインして変更を行うことができます。
すでにログインしてサイトにいる場合、右下に小さな上向き矢印が表示されます。
そのボタンを押すだけで、完全なアクセスが可能です。
CMSには非常に強力な機能がありますが、これがその概要です。ページ上で直接コンテンツを編集でき、ページパネルからサイトを移動することが可能です。
特定のサイトではコレクションやフォームデータにアクセスできます。
準備ができたら公開でき、そして、世界中の人々が私たちが行った変更を直ぐに見ることができます！
この投稿はWebflow社が提供する「Private Staging」の内容を元に作成しています。
引用元：https://webflow.com/feature/private-staging
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
Webflowのwebflow.ioステージングリンクを自社のチームメンバーのみがアクセスできるように制限できれば便利だと思ったことはありませんか？
そンなあなたに嬉しいアップデートです！
プライベートステージングのおかげで、それが可能になりました。
プライベートステージングは、webflow.ioステージングドメインの新しいオプションで、
アクセスを自分のワークスペースにログインしているユーザーに制限することができます。
これにより、チームはサイトの変更を公開する前に、プライベートかつ安全に確認することができます。
ただしこの機能は、現在のところエンタープライズプランのお客様のみ利用可能となっています。
ステージングサイトをプライベートにするには、サイト設定で以下の手順を行います：
- プライベートステージングを有効にして、ワークスペースのログインメンバーやゲストのみがアクセスできるようにします。
これは、今年中にリリースされるいくつかの機能の最初であり、Webflowのステージングと公開にさらなるパワーと洗練性をもたらすものです。
近日中にさらなる情報が発表されるので、お楽しみに！
この投稿はWebflow社が提供する「Components can now be used in Collection Lists」の内容を元に作成しています。
引用元：https://webflow.com/feature/components-in-collection-lists
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
コンポーネントをコレクションリストで使えるように！
先月のコンポーネントの改善に続いて、今日は要望の高かったアップデートをさらに行います。
それは、コンポーネントをコレクションリストに追加し、CMSのデータをコンポーネントのプロパティに接続できるようにすることです。
これにより、既にコンポーネントに変換した共通のデザインパターンをCMSのコンテンツと組み合わせて再利用できるようになります。
同時に、ウェブサイト全体でコンポーネントの他のインスタンスとレイアウトを同期させることも可能です。
以下は、新機能の概要です：
・コンポーネントをコレクションリストに追加：コンポーネントをCMSのコレクションリストやページテンプレートにドラッグ＆ドロップで追加できます。
・コレクションリスト内の要素をコンポーネントに変換：コレクションリスト内の要素は、他の要素と同様にコンポーネントに変換することができます。
コンポーネントが、ついにコレクションリストで使用できるようになりました！さらなるアップデートにも期待しましょう！
今の時代を捉えた話題の制作会社を掲載している「Web制作会社年鑑2023」に、公募枠でFunwork株式会社を掲載して頂きました。
創業3年程度の会社が、2014年から続いている歴史ある書籍に掲載いただけて有難い限りです。
この機会に少しでもWebflowに興味を持っていただける方が増えたらいいなと、
ノーコードでここまでできるということを事例を交えて紹介しています。
是非ご覧ください。
この投稿はWebflow社が提供する「Client's guide to the Editor: Collections tab」の内容を元に作成しています。
引用元：https://university.webflow.com/lesson/clients-guide-to-the-editor-collections-tab
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
コレクションタブから全てのコレクションの変更、新規投稿が可能！
コレクションは本質的にデータベースです。ここに情報を保存し、ウェブサイトの様々な場所で使用することができます。
パネルを開くと、1つ以上の名前が表示されます。これらはコレクションで、クリックするとそのコレクション内のすべてのアイテムを見ることができます。
ブログが設定されている場合、コレクションはブログ投稿と呼ばれ、中には各ブログ投稿が含まれています。
チームメンバーがいる場合は、そのコレクション内に各チームメンバーが含まれているかもしれません。
コレクションをクリックすると、ここにタブが表示されます。重要なのは、どのようなコンテンツであっても、これらのいずれかを開いて変更を加えることができることです。
変更を加えたら、変更を保存するか、キャンセルして保存しないかを選択できます。
同じコレクションから検索したり、
複数のブログ投稿などを選択したり、
削除したり、下書き状態に変更したり、アーカイブに移動したりすることもできます。
新しいアイテムを作成することもできます。各フィールドに詳細を入力するだけです。
エディターで行う他の変更と同様に、実際のサイトに反映するには、これらの変更は公開する必要があります。
コレクションには、ウェブサイトの多くのコンテンツを入れることができます。
ブログ投稿、チームメンバーページなど、各コレクション内のすべてのアイテムにアクセスして表示または編集することができます。
いつでも新しいアイテムを簡単に追加することができます。それがコレクションタブパネルです！
この投稿はWebflow社が提供する「Remove yourself from a Workspace」の内容を元に作成しています。
引用元：https://webflow.com/feature/remove-yourself-from-workspace
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
自分でワークスペースから退出可能になりました！
今までは管理者（またはクライアント）に協力してもらわなければならなかったワークスペースからの退出。
今までこの経験があるなら、今回のアップデートは要チェックです！今日からはゲストであっても自分自身をワークスペースから削除できるようになりました。
これにより、他の誰かに頼ることなく、自分自身をワークスペースから削除できるようになりました。
自分自身をワークスペースから削除するには、ダッシュボードに移動し、ワークスペースのドロップダウンメニューを選択し、「ワークスペースの管理」をクリックします。
次に、特定のワークスペースの省略記号(3つのドット）をクリックし、「ワークスペースから退出する」オプションを選択できます。
（ボーナス：このページのUIも改善され、ワークスペースの招待フロー、各ワークスペースでの役割の表示、一般的なナビゲーションの簡素化が行われました。）
これにより、ワークスペースを管理する方法が改善され、「私を削除してもらえますか？」という煩わしい瞬間がなくなることを願っています。お楽しみください！
この投稿はWebflow社が提供する「Quickly search for swatches in the style panel」の内容を元に作成しています。
引用元：https://webflow.com/feature/search-for-swatches
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
カラーの選択がさらに便利になりました！
アップデートによって、スタイルパネル内のカラー入力からスウォッチを直接検索して選択できます。
これにより、スウォッチのドロップダウンリストが表示され、それに対応する色と名前が表示されることで、色を見つけて選択するのがより簡単になりました。
また、要素がホバー状態の時にスウォッチ上にマウスを置くと、キャンバス上でカラーのプレビューがリアルタイムで表示されます。
現時点では、スウォッチの検索はスタイルパネルと相互作用のみでサポートされており、CMSやエディタではサポートされていません。
詳しくは、Webflow Universityの記事をチェックしてください。
一言メモ
ホバー時のカラーをキャンバスでそのままチェックできるのは地味に嬉しい機能です！時短になるし効率的なのでぜひお試しください！
この投稿はWebflow社が提供する「Performance improvements in the Designer for large websites」の内容を元に作成しています。
引用元：https://webflow.com/feature/designer-performance-improvements-at-scale
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
デザイナー画面での編集作業がスピードアップ！
最近のアップデートと最適化により、デザイナーでのナビゲーションと作業が少し速くなりました！
特に、50ページ以上のサイトについてはさらに改善されています。
デザイナーの読み込み速度が向上し、特に大規模なサイトについてはさらに高速化されています。
以下は、特定の領域で改善が加えられた一覧です。
- デザイナーの起動とプロジェクトの読み込み
- ページの切り替えにかかる時間の短縮
- ページパネル、要素設定、ナビゲータ、およびスタイルマネージャーでの高速化
- グリッドレイアウトの操作性の向上
- ... さらに改善が予定されています。
これらは、最近のアップデートの一部ですが、テストと改善の実施を続けることで、出版の安定性とエクスペリエンスの向上に加えて、より多くの改善が控えています。
今後も情報をお伝えしますので、お楽しみに！
一言メモ
個人的にはページの切り替えなど、細かいところですが早くなっている感じはします！こういったアップデートは頼もしいですね！
この投稿はWebflow社が提供する「Usability update to components」の内容を元に作成しています。
引用元：https://webflow.com/feature/improvements-to-components
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
Webflow Confでコンポーネントが発表されて以来、コミュニティからのフィードバックを聞き入れ、機能を改善する方法を模索してきました。
そのため、コンポーネントをキャンバス上で編集する際の以前の操作に戻ります。この変更は、皆様からのフィードバックに基づき、よりスムーズで直感的なものになります。
４つのアップデートでコンポーネントが簡単に編集可能に
以下が新機能の概要です。
- ダブルクリックでメインコンポーネントを編集。
プロパティに接続されていないコンポーネントをダブルクリックすると、メインコンポーネントを編集できるようになりました。
- キャンバス上でコンポーネントのプロパティを編集。
コンポーネントのプロパティでカスタマイズできる要素を選択し、キャンバス上で直接編集できます。
- ラベリングの改善。
コンポーネントまたはそのインスタンスのどちらを編集しているかを明確に示すためのラベリングを追加しました。
- メニューのナビゲーションが容易に。
コンポーネントとプロパティを編集するためのメニューをナビゲートしやすくしました。
一言メモ
以前のwebflowは、componentを編集するときに、Edit Componentをクリックせずに編集してしまうと、一部のフィールドだけが修正されてしまう問題がありました。
そちらが改善され、overrideするのか、Main componentを編集しているのか、が分かりやすくなり、人為的ミスが減ることに繋がります。
私もこのミスをよくやりがちなのでこのアップデートは嬉しい限りです！
この投稿はWebflow社が提供する「Nest Collection pages within folders for more URL control — plus more」の内容を元に作成しています。
引用元：https://webflow.com/feature/cms-improvements
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
今回は、2023年4月27日に発表されたアップデートです。今回のアップデートはコレクションページに関するものです。
より多くのURLコントロールのために、コレクションページをフォルダにネストできます - さらに追加機能も。
これからは、コレクションページをフォルダにネストすることで、SEOを最適化することができるようになりました。さらに、コレクション構造を複製して、特定のコレクションのテンプレートページをサイトマップから非表示にすることもできます。
今回のCMSアップデートには、以下の3つの更新が含まれています。
- コレクションページをフォルダにネストすることで、URLをより細かくコントロールすることができます URLのサブディレクトリ内にコレクションアイテムを公開し、SEOプロファイルを最適化することができます。
- 特定のコレクションのテンプレートページを公開しないようにする 全てのコレクションにテンプレートページを公開する必要はないため、コレクションごとに公開を無効にすることができます。
- コレクション構造を複製する。.既存のもののフィールドを複製することで、1つ1つのフィールドを再構築する必要なく、素早くコレクションを作成することができます。」
では、一つ一つ見ていきましょう。
コレクションページをフォルダにネストすることで、URLをより細かくコントロール
今まではすべてのコレクションページは、ルートドメインから1階層下に配置する必要がありました。例えば、過去には以下のように設定されていました。
「Blog posts」コレクションは、website.com/blog/example-postにアイテムを公開する。
「Case studies」コレクションは、website.com/customers/example-case-studyに公開される。
今後は、コレクションページの設定で親フォルダを設定することで、以下のようなサブディレクトリのURLでページを提供することができます。
「Blog posts」は、website.com/content/blog/example-postに公開することができます。
同様に、「Case studies」コレクションも、website.com/content/customers/example-case-studyに公開することができます。
さらに、複数の階層にわたってコレクションページをネストすることもできます。例えば、website.com/content/enterprise/blog/example-postです。
この新しいレベルのコントロールは、SEOを微調整する際に特に役立ちます。
個別のコレクションにおいて、テンプレートページの公開を無効にすることができる
特定のコレクションについて公開を無効にし、サイトマップからそのテンプレートページを削除することができます。
Webflowでは、作成する各コレクションに対応するテンプレートページが生成されます。これらのテンプレートページは、ブランクのテンプレートページに変更を加えない限り、サイトマップに公開されません。ただし、今までは、変更を加えた場合、どんなに小さな変更であっても、これらのテンプレートページは公開され、検索エンジンによってインデックスされていました。
今後は、コレクション設定でスイッチをオフにするだけで、これらのコレクションページの公開を完全に無効にすることができます。
コレクションの構造を複製することで時短になる
既存のコレクション構造を複製して、コンテンツライブラリを素早く構築することができます。
コレクションを複製したい場合は、設定を開き、トップの「コレクションを複製する」ボタンをクリックするだけです。
以上です！今回のアップデートはSEO的にとても重要で、CLIENTの細かなニーズに対応できる良質アップデートです！
使いこなしてさらにSEO対策を強化しましょう！
