サイトを立ち上げたものの、ページのレイアウトが思うようにつくれず、不自由な思いをしている方はいらっしゃるでしょう。等のプログラミング(コーディング)の知識がないと、思うようにレイアウトできないことは多々あります。し・画像・本文・・と同じ要素がひたすら積み上がった単調な構成になることが多くあります。ブログ記事ならそれでもよいかもしれませんが、単調な構成の連続は飽きられる可能性もあります。伝えたい情報(固定ページやランディングページなど)は、少しレイアウトを工夫して、しっかり読んでほしい、ということもあるでしょう。なるとプロの技術が必要になってきますが、プロに発注する予算がない場合は、編集機能を拡張するプラグインの導入を検討するのは一手です。」は、ページのレイアウトや要素の追加を直感的にできるようにするプラグインです。Jimdo(ジンドゥー)」というサイト作成サービスを使ったことがある方ならピンとくるかもしれませんが、ページの完成物に近い見た目で編集ができるようになるプラグインです。イメージとしては下図のようなものです。くわしくは後述しますが、公開したページの見た目で、何やら編集できそうなボタン類が表示されているのがわかると思います。この見た目でレイアウトの変更や、要素の追加、編集などができます。最初から用意されている要素も豊富で、以下のようなものを自由に組み込むことができます。これらの要素を自分の手でつくるには相当量の知識習得と実践技術が必要ですが、プロのデザイナーのごとく細かいことを気にしなければ、申し分ない実用性です。慣れている方は、プラグインを次々追加することに抵抗のある方もいらっしゃるかと思います。本体の更新にともなって使えなくなったりすることです。$34($1=100円とすると、3,400円)ですが(無料お試しは可能)、大手販売サイトでは20万件以上売れています。開発元の情報によれば、ユーザー数は150万人以上と多く、海外製の有名テーマにしばしば組み込まれていることを考慮すると、実際にはもっと多いのでは、と推測します。2011年ころから継続的にアップデートや更新がかけられていますので、開発元の体力もあると考えてよいでしょう。テーマによく組み込まれているのですが、日本国内ではあまり普及していない印象がありました。最近まで英語でしか使えなかったことや、動作が妙に重くなることなどが影響していたのではないかと思います。最近は日本語でも表示されるようになり、動作も以前より軽くなってきた印象があります。日本語の翻訳はまだ完全ではなく、注釈などは英語のままのところも目立ちますが、重要な部分はほぼ翻訳されています。検索をかけても日本語の情報は少ないのですが、今後徐々に増えてくるかもしれません。感触をチェック百聞は一見にしかず。試してみるのが早いですね。気になる方はすぐに使用感を確認できるテストサイトをいじってみましょう(無料)。自分のサイトにインストールせずに使用感を確認できます。ページにアクセスし、名前とメールアドレスを登録します。すると以下のようなメールが送られてきます(英語のタイトルですので見落としにご注意を)。場合によっては迷惑メールフォルダに入ってしまっているかもしれません。」ボタンをクリックすると、以下のようなページに飛びます。」をクリックしましょう。ちなみに画面右上に試用できる残り時間が表示されます。秒単位で表示されていますが、12時間です。一見すると普通のページが表示されるため戸惑うかもしれませんが、実は編集画面です。ページ内の各要素にマウスカーソルを合わせると編集用のパネルのようなものが表示されます(例:上図赤枠)。適当に触っても怒られませんので、いろいろクリックしたり、ドラッグしたりしてみましょう。これで大体のイメージはつかめると思います(テスト版は英語ですが、実際には日本語の表示が可能です)。編集に慣れていると別世界のように見えたかと思います。これなら有料でも使いたいなと思える方向けに、引き続き、インストールと基本操作を解説します。」というマーケットプレイス(販売サイト)で購入します。」から購入、ダウンロードします。」のアカウントをお持ちでない場合は新規登録をする画面になります。)などにお声がけください。管理画面にログインして、左メニューの「プラグイン」から「新規追加」をクリックします。「プラグインのアップロード」→「ファイルを選択」の順にクリック。」というファイルを選択してアップロードします。「プラグインを有効化」をクリックします。インストールと有効化が完了です。左メニューの「固定ページ」から「新規追加」をクリックします。エディタ選択ボタンが現れているのが確認できます。特有の編集画面を開くためのものです。編集画面に近いもので、「フロントエディタ」の方は公開したページそのままの見た目で編集できる画面です。先にサンプルをお見せしましょう。画像やテキストブロックなど、いくつかのパーツが並んでいるような画面です。抽象的ですが、どんなパーツがあるのかを一覧できます。「フロントエディタ」のサンプル編集画面こちらはページ全体が切り替わり、実際に公開した場合のページデザインがそのまま表示されます。実際の完成イメージを直接編集するような形式になりますので、直感的にレイアウトや編集ができます。実際にページをつくってみましょう。先ほど開いた固定ページの編集画面に戻り、「フロントエディタ」をクリックします。場合によっては、以下のような警告が出るかもしれませんが、「このページを離れる」で突き進みましょう。実際公開した場合の見た目で編集できる画面が開きます。「要素を追加」をクリックしてみましょう。多数の要素を選択できる画面が開きます。これでも画面に収まりきっていませんが、これだけ要素がそろっていれば、大抵のことは事足りることが想像できるのではないでしょうか。「行」をクリックします。すると以下のように「行」が追加されます。「行」は要素を置くためのブロックのようなものです。行にマウスカーソルをあてるといくつかのボタンが現れますので、中心にある「+」をクリックします。ここから「行」というブロックの中に、さらに要素を追加します。先ほどと同じく、要素の一覧が出てきますので、今度は「テキストブロック」をクリックします。テキストブロックの設定画面が出てきます。テキストを書き換えたら、下部の「変更を保存」→「閉じる」の順にクリックします。以下のようにテキストブロックが追加されました。次は少しレイアウトを変えてみましょう。「行」のあたりにマウスカーソルをあわせ、「行」の隣にある「▶」をクリックします。横線が2列になったようなアイコンが出てきますので、こちらをクリックします。「行レイアウト」の設定画面がでてきますので、横線が3列になっているアイコンをクリック→「更新」ボタン→「×」アイコンの順にクリックします。これでレイアウトが3列の構成に変わります。先ほどのテキストブロックの横に2枠分増え「+」アイコンが出てきますので、残りの2枠にも要素を追加してみてください(テキストブロック以外でもOK)。残り2つの枠にも何か要素を追加できたでしょうか?少し解説しますと、下図の青枠が冒頭でつくった「行」、赤枠が先ほど変更したレイアウトで「カラム」と言われます。「行」を増やしていけば、下に段々とブロックが増えていきます。「行」の中のレイアウトを変え、「カラム」を増やせば、横にブロックが分割されて増えていきます。一般的な表でいう「行」と「列(カラム)」ですね。この「カラム」は配置を変えることもできます。下図のように真ん中の「カラム」にマウスカーソルをあて、クリックしたまま左の方へドラッグしてみましょう。1列目のカラムのあたりにドラッグすると背景に斜線がかかったような見た目になりますので、そこでドロップします(クリックを離します)。真ん中にあったカラムが1番左に移動しました。このように、「行」や「カラム」、「テキストブロック」などの要素にマウスカーソルをあてて各種アイコンをクリックすると、あとから変更が可能です。鉛筆のようなアイコンが「編集」、「+」のアイコンが要素の「追加」、ゴミ箱のアイコンが要素の「削除」、書類が2つ重なったような見た目のアイコンが要素の「複製」です。だいたい見た目で想像がつくでしょうか。ちなみに「行」を複製すると、行が内包している要素を丸ごと複製してくれますので、類似の要素が続く場合は「複製」をうまくつかってあげると、ページ作成の時間が短縮できます。PC・タブレット・スマホビューの切り換え(レスポンシブビュー)画面最上部にある紺色のバーから、下図アイコンの選択を変更すると、タブレット(縦と横)やスマートフォン(縦と横)で見たときの見え方も確認することができます。編集が終わったら、画面右上にあるメニューから「フロントエディタ」を終了します。Editor」は英語になってしまっていますが、「管理画面エディタ」のことです。Deaft」は下書き保存、「公開する」は文字通り公開するボタンです。公開してみると、先ほどの管理画面で見た通りのレイアウトで表示されていることがわかります。基本操作については以上です。この操作を覚えれば、あとはレイアウトの変更や要素の追加などで様々なレイアウトのページ作成が可能です。専門知識がない人にとってはとても便利なプラグインですが、デメリットについても考慮しておきましょう。以下のようなものが考えられます。提供が終了する可能性があるあらゆるプラグインに共通することですが、何らかの事情で提供やアップデートが終了する可能性はゼロではありません。実績からしてリスクは低いと考えますが、念のため留意しておきましょう。標準でこういう機能を実装し始めることもありうるのでは、とも思います。アップデートにともない、プラグインが不具合を起こす可能性があります。随時対応すると思いますし、自動アップデートの機能なども備えていますが、一時的におかしな現象が起こることはあるでしょう。使用をやめたい、となるとやや面倒なことが起こります。特有のものですので、使用をやめた場合、編集画面に「ショートコード」と呼ばれる記号的な文字列が並び、それらを手で再編集するのは困難です。ページ自体が見られなくなるわけではありませんが、再編集は困難になると思っておいた方がよいでしょう。環境により動作が重い高機能な分、お使いのサーバーの環境(処理速度や反応の速さ)によっては動作が重いと感じる場合があるかもしれません。1ページが長くなる場合、要素も増えますので、必然的に重くなりがちです。頻繁に編集しないページなら我慢できるかもしれませんが、念のため注意したい点です。微調整は難しい細かいことにこだわらなければ問題ありませんが、既存の要素の微調整やアレンジには専門知識が必要になります。要素によりますが、複数のデザインバリエーションが用意されていますので、大体のニーズには応えられると思いますが、100%思い通りになるわけではない、ということも留意しておきたいところです(逆に言うと、専門知識があればある程度カスタマイズできる余地も用意されています)。基本的にコンテンツ部分を編集するためのもので、ヘッダーやフッター、サイドバーなどは編集対象外です。デメリットを書くと急にトーンダウンしてしまいますが(笑)、特にレイアウトを工夫したい固定ページなどに使う想定なら便利です。固定で見せたいページやランディングページもブログ記事風になってしまい、味気ない思いをしている方はいらっしゃると思います。そんな方にはおすすめですね。使用を途中でやめたいとなっても、1からページを作り直せばいいや、と割り切れれば問題ありません(実際やると大変ですが...)。と3,000円台ですし、買い切りですので、毎月課金されることもありません(2016年9月現在)。実は国産で類似のプラグインは存在するのですが、月額課金であったり、買い切りで数万円するため、ハードルはやや高めです。直感的な操作でレイアウトを工夫でき、配置できる要素も豊富にそろっています。固定ページなどで思うようなページづくりをできずに悶々としていた方におすすめできます。世界的に実績のあるプラグインですので、当面は安心して使えるでしょう。環境によっては動作が重くなったり、依存度が高くなると途中で使用をやめにくくなったりすることがある点は、念のため留意しておく必要があります。$34($1=100円前後の換算なら3,400円前後)で買い切りのため、興味があれば試してみる価値はあります。Tutorial(映像解説ページ)このブログの作成時間は約4時間でした。関連TweetPocketWordPressSNSでもご購読できます。TwitterでフォローするFeedlyでフォローする普門正浩(他称:ふもぱん先生)フリーランスWebディレクター:12歳でWebサイトをつくり始めて早20年。50万ページ超の制作実績を要す企業でディレクションやプロデュースを約5年、ソーシャルメディアとスマホを中心に社内教育と事業開発を約2年経験。現在はフリーで上場企業から個人まで幅広くWeb活用の支援を行う。いいなぁと拝見しておりました。『weluka』(https://www.weluka.me/)も同じような感じかなと購入を悩んでおりました。コメント&お読みいただき、ありがとうございます。おっしゃる通り、国産ですと『weluka』が近いですね。解説動画を見る限り、感覚的にも近い印象でした。行き着きましたが、試しに数ヶ月使ってみるのもいいかもしれませんね。PMお返事ありがとうございます。一度月額課金でやってみようかなと思います。解説をこちらでみて、とても分かりやすかったので、これはこれで気になっておりました。参考になりましたし、別の記事も是非拝見させて頂きたいと思います。ありがとうございます。*メールアドレス(公開はされません。