Gutenberg エディターのベータ版の説明をデフォルトのママ

これは画期的です。
ワードプレスのテキストエディタが劇的なバージョンアップをしようとしています。まだベータ版(正式リリース前の試用版)ですが、なかなか使いやすいです。公式の説明がわかりやすいので、以下そのまま掲載します。

Gutenberg を試してみよう

この新しいエディターのゴールは、WordPress へのリッチコンテンツの追加をシンプルで楽しくすることです。この投稿全体がコンテンツのパーツ—LEGO ブロックのようなもの—により構成されており、動かしたり操作できるようになっています。カーソルを動かすと、様々なブロックが枠線と矢印とともにフォーカスされます。矢印を押すとブロックをすばやく並び替えることができ、コピー & ペーストしているうちに内容が消えてしまう恐れがありません。

現在ご覧いただいているのがテキストブロックで、すべてのブロックのうち一番基本のブロックです。テキストブロックは、投稿内を自由に移動できる独自のコントロールがついています。

…例えば、右揃えのこれのようなものです。

見出しは別ブロックとなっており、コンテンツのアウトラインと構成に役立ちます。

百聞は一画像にしかず

画像とメディア取り扱いへの高い気遣いは、新しいエディターのメインフォーカスです。キャプションを追加したり、全幅にするのがより簡単で協力になっているのにお気づきいただけるでしょう。

美しい風景
テーマでサポートされていれば、画像ツールバーに「幅広」ボタンが表示されます。お試しください。

キャプションを選択、削除、編集してみてください。画像や他のテキストを間違って選択して、表示を台無しにしないよう気を使わずに済むようになりました。

「挿入」ツール

WordPress ができるすべてのことが、すばやく、同じ場所・インターフェイスで可能であると想像してみてください。HTML タグやクラスを理解したり、複雑なショートコード構文を覚える必要はありません。これこそが「挿入」ツール—エディター中にある (+) ボタン—の真髄で、すべての利用可能なコンテンツブロックを閲覧し、投稿に追加することができます。プラグインとテーマは独自のブロックを登録することができ、リッチな編集や公開の可能性を広げます。

お試しいただくと、WordPress が投稿に追加可能でありながら、ご存知ではなかったものを見つけていただけるでしょう、以下はこの投稿が使用しているブロックの簡単なリストです。

  • テキストと見出し
  • 画像と動画
  • ギャラリー
  • YouTube、ツイート、他の WordPress 投稿などの埋め込み。
  • ボタンやヒーロー画像、区切りなどのレイアウトブロック。
  • もちろん、このようなリストも ^^

ビジュアル編集

ブロックの大きな利点は、それぞれの場所で編集し、コンテンツを直接操作できることです。引用ソースやボタン内テキストなどを編集するためのフィールドを持つのではなく、コンテンツを直接変更できます。以下の引用を編集してみてください:

このエディターは、リッチな投稿や固定ページの作成を簡単にする、新しい執筆体験を生み出そうとしています。また「ブロック」によって、現在はショートコード、カスタム HTML、外部埋め込みコード自動ディスカバリー機能が実現していることをより簡単にします。

マット・マレンウェッグ、2017

引用の​​ソースに対応する情報は、画像下のキャプションに似た別のテキストフィールドです。このため、ソースを選択、変更、または削除しても、引用自体の​​構造は保護されます。いつでも簡単に戻すことができます。

ブロックは、必要なもの何でもかまいません。たとえば、テキスト構成の一部として目立たない引用符を追加してもよいでしょう。または、巨大で装飾的なものを表示させることもできます。これらのオプションはすべて挿入ツール内で利用できます。

サイドバーのブロックインスペクターでスライダーをドラッグすると、ギャラリーのカラム数を変更できます。

メディア重視

新しい幅広全幅配置をギャラリーと組み合わせると、非常にメディアリッチなレイアウトをすばやく作成できます。

アクセシビリティは重要です — 画像の Alt 属性をお忘れなく。

全幅画像はかなり大きくなる場合もありますが、画像によってはそうする価値があることもあります。

上は2つの画像のみのギャラリーです。フロート調整を行うことなく、魅力的な見た目のレイアウトを簡単に作成することができます。またブロックを切り替えて、ギャラリーを個別の画像へ簡単に戻すこともできます。

あらゆるブロックでこれらの配置を選択できます。埋め込みブロックでも利用でき、ボックス外でもレスポンシブ対応しています:

静的または動的、装飾的またはプレーンなものなど、お好みのブロックを構築できます。こちらがプルクオートブロックです。

Code is Poetry

WordPress コミュニティ

追加ブロックを作成する方法を学んだり、プロジェクトに協力したりすることに興味がある場合は、GitHubリポジトリへ移動してください。


Gutenberg をテストしていただき、ありがとうございます !

👋

おススメレンタルサーバー

レンタルサーバーは追いつけ追い越せでどこがベストという事はなかなか言えないのですが、やはり地元びいきといいますか、できれば関西のサービスを使いたいと思っています。

交流会や勉強会で中の人と会える機会もあったり触接情報収集できることもありますし。その中でおすすめなのがXserverさんです。

一押しレンタルサーバー
Xserver

ドメイン取得

お名前ドットコム
こちらは関西の会社ではありませんが、ドメイン管理業者の老舗で、ドメイン管理ではおススメです。ただし、レンタルサーバーはあまりお勧めではありません。

ネットから適当にひらってきた画像をSNSのアイコンにしてませんか? 著作権にご注意!

ヤフーニュースで弁護士さんがこんな記事を載せていました。
個人でこっそり使ってもアウトですよという話なのですが、このように警告しています。

「他人の著作物を使用したアイコンの法的リスクについて」
https://news.yahoo.co.jp/byline/kuriharakiyoshi/20181021-00101284/

他人が作成したイラストや写真を許可無く勝手にアイコン等で使うことは元より著作権侵害に当たります。今までほとんど問題になっていなかったのは、単に著作権者が大目に見ていてくれた、ないし、訴えても裁判費用の元が取れないので訴えなかっただけに過ぎません。

h

ブログやSNSのアイコンにアニメのキャラとか、誰かのイラストとか使っていたりしませんか?

有名人の写真とか適当に使ったりしていませんか?

拡散してくれてむしろオッケーと考えている人も中にはいるかもしれませんが、少なくとも日本国内では著作者が特に断らなくても著作権はちゃんと発生しています。無断転載禁止と書いていなくてもです。

判決でアウトが明確に出ていますので、何かあれば勝ち目はないです。
著作権が切れいてるような古い絵画などでも、写真を撮った人に著作権が発生ると判断されることもあるそうなので、これはいいとか、これはアウトとか考えずに、とにかく他人がアップしている画像は使わない方がいいと思います。

ネットには自由に使っていいとしているところや、個人利用はオッケイとしている人が結構あります。

たとえばこちらの 無料写真サイト 「足成」など、たくさん載せているところもあります。ただし、どこまで使っていいかはちゃんと利用規約を確認してください。

こういうサイトもありますので、安易に人の写真を使って面倒なことにならないようにしましょう。

ITは結局わけわからない!

中小企業庁の白書にこんなデータが。。。

小規模事業の「2 主要業種ごとの社会経済環境の変化から受ける影響」

という項目で、「クラウドやIoT等、様々な情報化技術の急速な普及が与える影響(主要業種別)」ってのがあって、その回答がこちら。

6割が良いか悪いかわからない!

これはIoTとか情報化技術全般についてなのですが、実際問題変化が速すぎて、大半の人が良くわからないと感じているんですね。
ホームページもその技術は変化し続けていますから、ホームページの必要性はわかっても、何がいいかはわからないというのはよく聞きます。

まさにここですね。
ホームページの適正価格がわからないというは!

判断しようがないというところですよね。

ホームページ屋さんがその指標を作っていかないといけないのでしょうね。

50万のホームページの価値を、いつまでに評価するかとか、少なくとも次の更新時には参考材料となるくらいは最低限用意しないといけない。

適正な外注費とは

外注費の種類

外注費には大きく分けて3種類あります。

・作業人件費
・システム利用料
・技術料

たとえば、通販サイトの商品を一個500円で登録しますなどという場合、これは誰にでもできる仕事なのでほぼほぼ人件費です。

ですが、数万個ある商品を効率的に登録できるシステムとなれば、システム利用料ですし、その商品が売れるコピーも考えますとなると技術料も入ってくるかもしれません。

もしすべて人件費だけで成り立っていれば時給1000円から高くても3000円くらいまでで、あとは作業時間がどれくらいかかるか想像がつけば検討きます。
ですが、システム利用料や技術料となってくると本当にピンキリです。もちろんぼったくりとかそういう意味ではなく、自分たちが必要としているものかどうかがわかりにくいという意味です。

月額何十万もするホームページ管理システムがあります。もちろん機能も充実しています。その反面、月額1000円のホームページ管理システムもあります。果たしてこの差は何でしょうか? 値段で言えば数百倍です。数百倍の性能の差って何でしょうか。

技術料で言えば、ロゴの制作費などもそうです。一流のデザイナーに頼めば数百万ですが、クラウドワークスなどでは20000円も出せばいっぱい案が出てきます。値段にすれば数百倍。この百倍以上の差って何でしょうか?

簡単に言えばどれだけ優秀な人材がどれだけ動くかということです。
単純な話、年収500万社員を5万円で動かすことができるのはせいぜい1日です。年収500万のフリーランスなら2日くらいはいけます。

1000円のサービスでは、時給1000円のスタッフで30分くらいでしょうか。

人が動く分にはそのような理解でいいと思います。
でも、システム利用料については我々でも謎が多いです。

両方の意味で。
古いシステムを高額で売っている事例もあれば、かつて優良だったものが超価格破壊で無料のサービスがリリースされたりします。
技術の進歩が速いのが原因ですが、本当に目まぐるしく変化します。

これだけは、調べるしかありません。
われわれも日々研究です。

ホームページデザインのコツは隙間と大きさと整列の法則 その1

隙間の法則

隙間が近いものは仲間。遠いものは他人。
これがとても大事な法則の一つで、これさえ間違えてないと読みやすく、見やすいものが作れます。

このように近いほうが仲間に見えます。
というこの文字も下の画像に近いので、実は上の画像の説明のつもりが、下の画像の説明に見えませんか?

隙間が同じものは同じ関係性にあると判断されてしまいます。
上の画像ではABCよりも、EとDは関係性が強く見えてしまいます。
隙間が同じと書きましたが、AとBの隙間より、BとCの隙間の方が少しだけ狭いです。でもぱっと見で、EとDの近さと明らかに違うので、ABCの関係と、EDの関係なら、EDのほうが親密に見えませんか?

つまり、不要に近づけたり、話したりすると余分な情報を付加してしまうので、理解しにくいものになってしまいます。

また、この法則は単純に見た目の問題ですので、たとえば、下の画像のように配置すると同じAでもなにかの関係があるように見えます。

近いと仲間に見える。同じ間隔だと同じ関係に見える。ものすごく単純な事ですが、これは図形だけではなく、文章の見出しや段落、写真の中身など、全てに作用します。このことを意識するだけでも随分読みやすい、理解しやすいデザインになります。

たとえば下のようにすると見出しAと見出しBは関係があって、見出しCは少し違う内容に見えてしまいます。

見出しA
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文  本文 本文 本文 本文  本文 本文 本文 本文 
見出しB
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文  本文 本文 本文 本文  本文 本文 本文 本文


見出しC
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文  本文 本文 本文 本文  本文 本文 本文 本文 

デザインはセンスではなく知識です

一時期、とある職業訓練校でホームページデザインの講師をしておりました。職業訓練校なので、二十歳すぎに人から還暦近い方までいろんな方がいらっしゃいました。

そこで実感したことなのですが、デザインはセンスではなく、知識だという事です。年齢やキャリアも多種多様で、かなり偏差値の高い方もいらっしゃいましたし、美術系の学校を卒業している人もいました。デザインに関する知識を持っている人もいれば、全く未経験の人もいました。

ですから、デザイン能力は本当にピンキリでした。ピンキリでしたが、一つ言えることは、教えることは何もないレベルの人は一人もいませんでした。といいますか、デザインの基礎的な知識が無い方ばかりでした。

センスのいい人は結構いらっしゃいました。理解力の高い方もいらっしゃいました。だいたい10人中、2~3人はデザインセンスが高く、経験を積めばいいデザイナーになれそうでした。

とはいえ、即戦力クラスの人はいません。

これはどういうことかというと、デザインはセンスではなく、知識によるところが大きいという事です。きちんと学べば、センスは普通にあれば大丈夫です。
たまーに、ものすごく早く「できた」という方がいらっしゃいました。全然できていないのですが。そういう方は、まず、理想形が描けていないんですよね。さすがにそういう方は、ちょっと道のりが長いかもしれません。

というわけで、学習すればデザインはうまくなるのですが、問題は、独学が難しいという事です。
その理由については、ページを改めて説明します。

スモールビジネスのセールスポイントは「あたりまえの事」をきっちり伝える

日本一。
とはいかなくても、地域ナンバーワン。
業界初。
なんとかランキング1位!
ほにゃらら賞受賞。

こういったアピールポイントはとても分かりやすいですし、とても効果的です。もちろんここまで行かなくても、周りでほとんどやっていない取り組みとか、技術力とか、特異なアピールポイントは皆さん重要だというのはよくご存じだと思います。

ですが、ホームページ制作においては当たり前のこともとても重要です。
技術にこだわっている方、仕事に誠実な方ほど、当たり前のことを出そうとなさらないのです。これはあたりまえ、胸を張って言うようなことじゃない。

それは多分、その通りなのだと思います。
ですが、ホームページ制作においてはちょっと事情が異なります。
ホームページは大抵、あまりあったことのない方、よくあなたの事を知らない人が見ます。あなたが誠実でまじめかも知らない人です。

事前情報が何もない状態でホームページを見た時、当たり前のことを書いているサイトと書いてないサイトがあればどうでしょう?

「書いていないことは出来ない事」と捉えられかねません。
それではせっかくのアピールポイントも魅力半減です。

なので、時間を守りますとか、決めたとおりに納めますとかも、セールスポイントとして書いてください。ただ、書き方だけは工夫してください。
「十分なコミュニケーションで安心」とか。「お客様の要望をチーム全体で共有」とか。少し角度を変えてそれっぽく表現してください。

ホームページ制作の簡単な方法はどこにもない

だれでもできる。
簡単にできる。
すぐできる。
専門の知識はいらない。
5分で出来る。
19800円で出来る。

こういううたい文句のホームページ制作サービスをよく目にします。
もちろんこれが嘘だっていうわけじゃありません。
きっと本当なのです。
簡単にホームページを更新できるシステムを、いろいろ工夫を重ねて作っています。

なのですが、いざ作ろうとすると、これが簡単な方と、難しい方が出てきます。操作自体は簡単なのですが、一つ大きな問題があります。
あなたは文章を考えるのは得意ですか?
得意であるなら、きっとこのようなホームページ制作の仕組みが役に立ちます。こういったサービスのほとんどは自分で考えた文章を簡単に組み立てられるように工夫されて作られています。

何を書くかが簡単ではない人には、まず、こういうツールを使う前に、サイトで何を伝えるかをどう作るかという事が大きな壁として立ちはだかることがあります。ここが得意な方は問題ないのですが、苦手な方にはなかなかの難関となります。

残念ながら、ここが苦手な方には、ホームページを簡単につくることはできません。頑張るしかありません。

スタッフさんが1日考えて何もできてない

ホームページ更新に担当スタッフさんがホームページの調べ物をするのにどれくらいの時間をかけてもいいでしょうか? 我々の場合はこれが本業ですので、1日調べてできないという事があっても、調べたことは知識の蓄積になるので大丈夫です。何件かに一件はそういうことがあり、研究という事になります。

ですが、社内のホームページ担当スタッフさんにどれくらいその時間をつくれるでしょうか。専業スタッフならその方の成長も大切ですので、ある程度時間を確保できると思います。ですが兼業の場合、ホームページの更新以外の業務がメインという方がほとんどです。そういう方が考えて考えて分からない・・・という状況を良しと出来るでしょうか。

この判断は経営者次第なのですが、あくまで淡々とこなしてほしいというときは、方法は一つです。

考える余地を無くして、作業のマニュアル化です。

考える余地が出た時は、そのホームページを作った制作会社に相談するとか、気軽に相談できる人を見つけておけばいいわけです。