2017年8月3日

デザイン

【WordPress】シンプルで使いやすいエディタ、「Gutenberg」

目次

  1. はじめに
  2. Gutenbergとは?
  3. Gutenbergを使ってみた
  4. メリット/デメリット
  5. まとめ

はじめに

本記事ではWordpressのエディターをシンプルにするプラグイン「Gutenberg」と使った感触をご紹介します。

Gutenbergとは?

そもそもGutenbergとはどういったもので、どうして話題を集めているのでしょうか?

Guntenbergが話題を集めたきっかけは、World Camp Europe 2017というパリで行われたWordpressのイベントでWordPressの共同開発者であるマット・マレンウェッグが特別セッションでこのプラグインを紹介したことです。

私はシンガポールのWordPressのイベントに行った際に紹介されていて、はじめてこのプラグインを知りました。

GutenbergはWordPressのエディターをさらに使いやすく、シンプルにするためのプラグインです。

UIがシンプルで直感的なだけでなく、動画の埋め込み、facebookやtwitterなどの外部サービスの埋め込み、ギャラリーの作成などが簡単にできるのが特徴です。

現在はベータ版が出ており、まだ本格的に導入するのはリスクが高いですが、マット・マレンウェッグが出したプラグインということで、注目を集めています。

気になる方は以下、リポジトリからご覧ください:
https://github.com/WordPress/gutenberg
公式WordPressのプラグイン上のGutenbergはこちらです。

Gutenbergを使ってみた

では、実際にどのようなエディタなのか、どんなことができるのか、使ってみたいと思います。

プラグインをインストール/有効化する

「Gutenberg」をインストールすると、投稿の下に「Gutenberg」という新しい項目ができます。「Gutenberg」エディタを使用されたい方はこちらをクリックして、エディタへ進みます。

エディタのインターフェース

実際に「Hello World」を「Guntenberg」で開いたものがこちらです。

普通のWordPressエディタと比べて非常にシンプルになっています。

ちょっと中身を書き換えて、メニューを開くと、このような感じになっています。

メニューの中にはテキスト、イメージの他に、ギャラリー、見出し、引用、リスト、カバー画像などがあります。

カバー画像を試す

まずは、カバー画像を追加してみたいと思います。

メニューからカバー画像を選択し、背景に設定する画像を選択するとこのようになりました。

カバー画像の横幅の大きさなども決められるみたいです。


また、右側にあるサイドメニューを見ると、

カバー写真を暗めにするか明るめにするか、位置を固定にするかなどのオプションも選べるようになっています。

試しにテキストを追加すると、こんな感じです。

その他の機能

その他の機能、まずは見出しをみていきます。

こんな感じになっています。
タグも、h2タグ , h3タグ , h4タグと選べるようになっています。

引用をしたいときも、引用のブロックを使えば、綺麗に整えてくれます。

ソースコードを入れたい時も、他のプラグインなしで綺麗に整えてくれます。

ギャラリーを入れる際には、それぞれの画像にキャプションがつけられるようになっています。

また、ギャラリーを入れ込んだ際、カラム数が右のサイドバーで設定できるようになっています。
このように2カラムにしたり…

このように4カラムにしたりできます。

動画を埋め込んだりすることもできます。

こちらは、インスタグラムの埋め込み。

こちらは、Twitterの埋め込みです。

全体として、このような状態になりました。

全体として見ると、エディタ上で見えるコードやインスタグラムよりも綺麗にまとまっている気がします。

Gutenbergのメリットとデメリット

メリット

Gutenbergを使ってみた感想としては、UIが非常にシンプルになり、使いやすくなっていると感じました。

Wixなどのホームページビルダーやmediumなどのブログサービスが流行り出し、WordPressもコンテンツ作成に置いてのユーザーエクスペリエンス上昇に乗り出したようです。

Yoast SEO の 開発者、Joost de Valkもコンテンツ作成において、ユーザーエクスペリエンスをさらに強化していくことに関して非常に関心を寄せているようなので、全体的なこの動きは続いていくと思われます。

デメリット

現在、多くの開発者が懸念していることが、Gutenbergが他のプラグインの対応をしていない、ということです。

例えば、Yoast SEOや、カスタム投稿タイプなどが一部のサイトでサポートされておらず、このまま対応されないようだとUIがどんなに使いやすくても、開発者は離れる一方になると思われます。

まとめ

以上、本記事ではシンプルで使いやすいエディタのプラグイン、Gutenberg(ベータ版)をご紹介しました。
この機能がワードプレスのコア機能になるかはまだ分かりませんが、UIとしては非常に優秀で書きやすいので、気になった方はぜひ試してみてください。

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP