初心者にもわかりやすく!WordPressの注目エディター「Gutenberg」の基本的な使い方
今からおよそ15年前、2003年5月27日、WordPressの書板がリリースされました。それまでは静的なHTMLによってホームページを作るのが主流だった時代に、WordPressによってテンプレートを活用した動的なサイトを作れるようになったのです。
そうした意味で革命的だったWordPressですが、2018年中に新たな革命的機能を実装する予定です。それが、**「Gutenberg(グーテンベルグ)」**と呼ばれる機能です。
今回は、*WordPressで開発中の注目エディター「Gutenberg」*について、初心者にもわかりやすくまとめました。基本的な使い方にも触れていますので、ぜひご一読ください。
目次
「Gutenberg」とは?
Gutenbergとは、14世紀に活躍したドイツの活版印刷技術の父「ヨハネス・グーテンベルグ」の名前にちなんでつけられたもので、WordPress 5.0以降で実装が予定されている新エディターのことを指します。2018年1月現在のWordPressのバージョンは4.9.1で、2018年度中には標準機能として実装・公開されることが見込まれています。
ただし、WordPressの公式ロードマップには、リリースの日付がまだ公表されていません。
Gutenbergは、いうなればMediumやDropboxのPaperのような編集画面で、HTMLやショートコードを知らなくとも、画像や文章、引用文などのそれぞれの要素をひとまとまりのブロックとして、レイアウトを確認しながら記事を作成することができます。技術に疎くても、より直感的にブログを作成することができるようになるのです。
天才プログラマーとしても知られるWordPressの開発者マット・マレンウェッグによれば、Gutenbergには次のような意味があるといいます。
「活版印刷術は本についてのものではあったけれども、単にそれだけのものではなかった。アイデアを広めたのだ。読み書きができるようになったのだ。エリートの独占がなくなったのだ。だからWordPressも、世界を変えるこの技術をGutenbergと呼ぶことにした」
実際のところ、ブログをはじめとするWebメディアは、いまや文章だけではなく、画像や動画、SNSコンテンツやVRコンテンツなど、様々なものが組み合わさってでき上がっています。Gutenbergを使うことによって、そうしたリッチな表現を、より簡単に、より楽しく再現することができるようになります。
Gutenbergについて知っておきたい3つのこと
Gutenbergを実際に使ってみる前に、知っておきたいことが3つあります。
現在は正式版としてリリースされている訳ではないので、次の点に留意しておきましょう。
1. 現在はプラグインとして提供されている
Pablo
Gutenbergは5.0以降に標準で搭載が予定されていますが、2018年1月現在まだリリースされていません。追加するにはGithubからソースコードをダウンロードして、Docker環境でマウントするか、プラグインとしてインストールする必要があります。
GutenbergはWordPressのプラグインページからダウンロードするか、プラグインの新規追加画面から「Gutenberg」と検索してインストール・有効化しましょう。
2. まだ開発段階
Pablo
実際のところ、Gutenbergの機能の多くはまだ実装途中で、新しいバージョンは以前に埋め込まれたUIや機能から大幅に変更されている場合もあります。そのため、Gutenbergのコメント欄には数多くの否定的なコメントも寄せられていますが、基本的には想定内の出来事です。
プラグイン自体がまたベータバージョンとしての位置付けのため、製作チームも**「本番環境では利用しないように」**というアナウンスを出しています。アップデートしたら上手く作動しない、ということがあっても慌てず、ダウングレードをするなどして対応しましょう。
3. 従来エディタではできないこともある
Pablo
Gutenbergはまだ開発途中のため、既存の従来エディタではできないこともあります。
例えば、ショートーコードをパラグラフに組み込んでも、まだ作動しません。また、パラグラフ内にテキストと画像をまとめて設置したり、埋め込んだりすることもできません。さらに、HTML5タグを利用しているため、古いテーマでは作動しないことがあります。
しかし、コピーやペーストは圧倒的に早く、ブロックで作成するのにも慣れれば、Gutenbergが手放せなくなるでしょう。
開発途中ということもあり、デメリットも存在しますが、それを脇においても試す価値はあるでしょう。
Gutenbergを使ってみよう
それでは、実際にGutenbergを使ってみましょう。
最初に、WordPressのプラグインの新規追加画面から「Gutenberg」と検索してインストール・有効化しておきましょう。
Gutenbergが有効化すると、左側のメニューに「Gutenberg」が追加されています。デモ画面を見ると、記事がどのように構成されているかがイメージできるでしょう。
Gutenbergが有効化している間は、新規作成画面でもこのようにGutenbergを使った作成画面に切り替わります。先頭にタイトルを入力して、記事を書き始めます。
途中に出てくる「+」マークをクリックすると、画像や動画、SNSの投稿などをブロックとして追加することができます。以下のように、画像を左右に寄せてレイアウトを組むことも可能です。
このように、Twitterの投稿やTEDのビデオなどを挿入することもできます。
各ブロックの左に出てくる上下の矢印をクリックすることで、簡単にブロックを入れ替えることもできます。
また、2017年12月11日のアップデートで、「リユーザブルブロック」(Reusable Block)と呼ばれるブロックが追加されました。
Wordpress.com
その名のとおり、ブロックの再利用が可能になります。ブロックに名前を付けることで、サイト内で利用している全てのブロックに対して共通の変更が反映されるという、大変便利なブロックです。
Gutenbergの今後
Github上で開発が進められているGutenbergは、リポジトリの作成が2017年2月4日となっており、まもなく開発から1年を迎えます。
当初はFacebookのオープンソースプロジェクトであるReactを利用していましたが、ライセンスの問題により途中でライブラリの変更を余儀なくされるなど、紆余曲折を経て現在に至っています。
Gutenbergの評価は賛否両論ですが、どちらの意見であっても必ず開発チームからのコメントがフィードバックとして返信されており、その本気度がうかがえます。
1月12日にはバージョン2.0がリリースして、以前よりも大幅に安定しています。まだまだ改善の余地はありますが、一足先にこのWordPressが放つ未来のエディターを使ってみてはいかがでしょうか。
まとめ
海外でMediumが爆発的に流行したり、日本でもnoteを使うブロガーが急増した理由は極めてシンプルで、*「書いている時のストレスがほとんどない」*ということです。その時期に重ねてWordPressからこうしたプラットフォームに乗り換えるライターも多かったと予想できますが、今こそWordPressが逆転を仕掛けています。
まだ、発展途上のGutenbergですが、まもなく公式の機能としてリリースされます。それまでの間、基本的な機能を実際に触っておくのも良さそうです。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- タイトル
- ホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- Twitterとは140文字以内の短文でコミュニケーションを取り合うコミュニティサービスです。そもそもTwitterとは、「小鳥のさえずり」を意味する単語ですが、同時に「ぺちゃくちゃと喋る」、「口数多く早口で話す」などの意味もあります。この意味のように、Twitterは利用者が思いついたことをたくさん話すことのできるサービスです。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- フォーム
- フォームとは、もともと「形」「書式」「伝票」などの意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング