STAFFBLOG スタッフブログ

WordPressとカスタムフィールド製造業

井上武明
2017/11/14
閲覧所要時間:約6

こんにちは、2017年になってオールドレンズに手を染めている井上です。

私が使っているニコンの一眼レフは「不変のFマウント」などと呼ばれ、1959年発売のNikon Fから同じレンズの基本規格(マウント)が使われ続けられ、半世紀以上前のレンズが最新のデジタル一眼レフでも使える楽しさがあります。

まぁ、いろいろと制約がありますが、自分より年上のレンズで撮る楽しさもありますが、安く楽しめると言うのが一番ですね。
写真は1959年に発売されたFマウント最初のレンズNIKKOR-S Auto 5cm F2と、そのおまけで購入したNikomat FTn(1967年発売)で遊ぶ4歳のわが娘。レンズはチョットだけ改造して普段使っているデジタルの一眼レフでも使えるようになってます。

という事で今回はオールドレンズの魅力をたっぷり紹介・・・思っていたらWordPressの気になる記事があったので今回はカスタムフィールド製造業について。

カスタムフィールド製造業?

ウェブ制作など、興味のあることについてネット上に出ている情報はつねに収集しているんですが、9月末にとても面白いと感じる記事がありました。


いったんまとめよう。カスタムフィールド製造業とは……

  • 顧客に対してWordPressサイトの制作を提供する仕事を意味する
  • プログラミングにはそれほど詳しくなく、ACFやCustom Post Type UIなどを駆使してWordPressをカスタマイズする人が該当する
  • デザイン、Javascript、コンテンツライティングなどの他の強みがあまりなく、器用貧乏っぽい人ほど、この言葉に敏感に反応する
  • 大きなプロジェクトに年単位で関わり数千万の予算をもらうのではなく、50万から300万ぐらいのプロジェクトを忙しくこなしている人が、この言葉に敏感に反応する
    といった概念である。

出典:カスタムフィールド製造業ならびにWebアセンブラーという職業について – Capital P


カスタムフィールド製造業、まさに自分のことじゃないか(笑)

なぜカスタムフィールド製造業が必要とされているのか

WordPressとはウェブサイトの更新を行うためのプログラムのCMS(Contents Management System)の一つで、CMSが使われているサイトの59.8%、ウェブサイト全体の29.0%でも何らかの形で利用されていると言われる超メジャーなCMSです。

そのため書店でもWordPress関連書籍は非常に多く、

「WordPressを使えば専門的な知識がなくても、プロなみのWebサイトを作れます」

みたいなキャッチコピーの本が沢山あるので簡単そうに感じますが、そこはやはり「本を売るため」のセールスコピーなので専門知識ゼロの方でもストレス無く簡単に作れますと言えるほどは簡単ではないです。(ちなみに似たようなキャッチコピーは昔から多くのウェブ制作サービスで使われてます。)

「最新スマホのカメラを使えば専門的な知識がなくても、プロなみの写真を撮れます」

と言われて買ったスマートフォンの中の写真データ、プロ並みとはちょっと言えない気がしませんか。

例えば雑誌の表紙などで使われる写真
これは購買層や誌面の内容に合わせて一流のカメラマンが「構図」「光の方向」「色味」「ピント」などを考えて、何度も工夫し、調整して撮影した中から最高の1枚が使われます。

例えば修学旅行などで撮る集合写真
この場合もカメラマンがいろいろと指示を出して失敗がないように準備をして素早く何枚か撮影しますが、渡されるのはやはりカメラマンが選んだ最高の1枚だと思います。

これはウェブの世界も同じです。

重要な内容のページやトップページ
これは利用者が求めるものとサイト運営者が提供したい内容に合わせて「デザイン」「機能」などを考えて、何度も工夫し、調整して作成した最高の1ページを用意します。

会社概要や商品・サービスのページ
住所や価格などある程度決まった形式が必要とされ、一定以上のクオリティを維持しつつも商品やサービスの変更に合わせて速やかに更新する必要が出てきます。

前者は頻繁に変わることは少ないですが、後者は情報のクオリティよりも正確性と鮮度が大切で、更新のたびにカメラマンに来てもらって撮影するのは時間と費用がもったいない気がしますよね。

最低限のクオリティで失敗しない撮り方をカメラマンに教えてもらって、必要なカメラやライトを買って自分で撮れるようになりたいと思うかもしれません。
せっかく撮った最新商品と人気商品なら、入口横で目立つショーウィンドウを用意して自分でならべたくなりますよね。

ついでに手書きポップも添えると読んでもらえるかな。
という感じに「誰でも撮れるような撮影セット」「入口横のショーウィンドウのスペース」がウェブでも必要とされます。
それがCMS(Contents Management System)の本質であり、「カメラのシャッターを押すだけ」「ケースの決められた位置に置くだけ」のレベルにまで簡単にしてあげるのがWordPressの「カスタムフィールド製造業」の本質だと思えます。

さらに言えば
「ショーケースの商品の値札は必ず見えるように並べ方のルールを決めましょう」
「売れ残らないように夕方になったら値引きシールを貼りましょう」
「プレゼント企画なら当選者のお届け先の住所とか聞かなくて大丈夫ですか」
などなど、忘れたら大変な事柄をウェブでもしっかりサポートすることも実際にはカスタムフィールド製造業の大切な仕事だと思います。

ただ言われたとおりに物を作るだけではダメってことですね。

管理画面が大きく変わる予定のWordPress5.0

さて、もうすぐWordPress4.9がリリースされる予定ですが、その次のWordPress5.0では長年使われている管理画面のテキストエディタがTinyMCE(タイニーエムシイイー)からGutenberg(グーテンベルク)という全く新しいものに変わる予定だと聞いています。


Gutenbergのテキストエディタはまだまだ開発中なんですが、テスト用のプラグインとして提供されているので誰でも試してみることが出来できます。(日本語化はまだまだ先ですね)

今までは難しかった表組みや画面の分割、各種機能の埋め込みなども使いやすくなるようなので期待していますが、ツールが使いやすくなったとしても「カメラのシャッターを押すだけ」の簡単さで失敗がなく作れる訳ではないので、簡単に更新できるようにサポートをするためのカスタムフィールド製造業的なものは無くならないと思いますが変化に対応する準備は大変です。

テキストエディタを見直す方針が示されたのが2016年12月、Gutenbergの名称とテスト用プラグインが出てきたのが2017年7月とWordPressはすごいスピードで進化しようとしています。
なので独りではついて行くのは大変。

こういうときにも協力してウェブ制作にあたれる仲間ってありがたいです。

※先日の社員旅行の台湾写真、せっかくなので何枚かを無理やり使いました。(^^;

荒木未希夫のFUJIFILM T10お散歩記録 – Part1

araki
2017/11/09
閲覧所要時間:約6

カントリ〜〜ロ〜ド♪
この道ぃ〜〜〜 ずぅっとぉ〜〜〜ゆけばぁ〜〜〜♪
あの街にぃ〜〜 つづいてるぅ〜〜〜〜♪
気がするぅ〜 カントリ〜〜ロ〜〜〜〜〜ド♪


っとここ最近脳内で永遠と流れておりますアラキです。

もぉこんな写真メインのブログを書くのはいつぶりでしょうか・・・・。


今までFVマガジン(メールマガジン)の担当ということもあり、
「皆様へ少しでもお役に立ちたい!」っという強い気持ちから
最近ではアプリ系やサービスの紹介をメインとした記事ばかり書いてきました。


その間プライベートで撮影した写真がたまっていくいっぽう・・・・。
インスタ上でしか見てもらう機会がない。
私そんな日々を過ごして参りました・・・・。



そこで僕は決めたのです。
それなら会社のブログでシリーズ化し、
たくさんの撮りためた写真達を勝手ながら
こちらのスタッフブログを通じて発信していこうと・・・・。







前置きはさておき僕はFUJIFILMのT10を使い始め約2年目ぐらいになりますが、
今年の夏にずっと気になっていたオールドレンズ「Helios-44-2 58mm F2.0」を購入し、
それからというもののこのレンズ独特のボケ感でもある「ぐるぐるボケ」の虜となってしまいました。

↑こちら僕の愛機T10とヘリオスさんです。(友人へ撮ってもらいました)


っということで今となってはフジノンレンズをつけずひたすらマニュアルで自己流で撮る日々。

それでは写真をジャンル問わず載せていきたいと思います( ´ ▽ ` )ノ

※全ての写真でぐるぐるボケが出ている訳ではりありません。温かい目で見てあげてください。



九州ハンドメイドフェスタ



↑このネコバスは結構蚤の市やマルシェなどで見かけるクレープ屋さんですね( ̄^ ̄)ゞ





健軍のカメラ雑貨屋さんPhotoCamerryさんとの撮影会



健軍町のマクドナルドのすぐ横にあるカメラ雑貨屋さんの
Photo Camerry(フォトキャメリー)さんとコラボして
商品のインスタ用の写真を撮る目的も含め撮影会を行いました♪




※ちなみにこの風船とひつじのお面は全く関係ありません。




オサンポキモノさんとの撮影会






いやぁ〜〜〜今年はたくさん浴衣のを撮影ができたので大満足大満足(^人^)




タデ原湿原





↑早朝食べるホットサンドと入れたてのコーヒーはもぉ最高でしたね!!
 帰ってアウトドア用の小さいボンベ買っていいか奥さんに聞いたところ1mmの可能性も感じられないぐらい速攻却下されたのはここだけの話・・・。




肥後民家村






ここ肥後民家村は玉名にあるのですが、
とても雰囲気が良くて、カレーも美味しくて、古民家の中も一部自由に入れるしで、
また必ずいきたいと感じさせる場所でしたね♪( ´▽`)




甲佐蚤の市 〜 VOL.5 〜







地元御船町のすぐ隣の甲佐町で年1回開催される甲佐蚤の市。
今回で5回目の開催ということで僕も初めて言ってみましたが写真を見てもらったらわかる通り、
朝から昼までひたすら食べてましたね・・・・・。(これでもダイエットしなきゃとしょっちゅう言っている・・・。)




七五三 〜 健軍神社 〜





健軍神社での七五三の撮影は今回で2回目♪
なのでスムーズに撮影ができましたが初めましてのお子さんを笑顔で撮るのってめちゃくちゃ難しいもんですね。笑
この日はほぼほぼ笑顔の写真は撮れませんでしたが、自分なりにはそれはそれでいい写真が撮れたのではないかとポジティブに捉えるようにしております。




家族写真 〜 能古島アイランドパーク 〜







今年こそは行ってみたいと思っていた福岡の能古島アイランドパーク!
運良く撮影を頼まれ初めていくことができたのですが。。。。

前日の台風の影響で満開のコスモスは全て散ってしまい、
残るは緑一色の畑のみ。。。。

まぁ楽しい撮影だったのでよしとしましょう!(いつかまたリベンジしてや・・・・・る・・・・。)




社員研修 〜 台湾 〜


はい!いきなり謎のドヤ顔から始まりましたが、今年は職員研修で初海外の台湾へ行ってまいりました!
詳しい内容に関しては大渡さんや藪下さんの記事をご覧ください♪

ホルガをあたかもペットのように散歩させるゆりっぺ先輩。
後ろのおばさんが「この子大丈夫かしら・・・。」っと言わんばかりのガン見でしたね。

FVといえば!!そぉ!!!こちらの3姉妹!!!
すでに空港で何度もジャンプしたりしてはしゃいでおりました・・・・。







【 アラキ 】 : えぇ〜〜今回の社員研修どうでしたか??
【西村さん】 : はい。3日とも雨でしたがとっても充実した旅でした。

っというやり取りが聞こえてきそうなぐらい朗らかな笑顔。

僕もこういう笑顔を振りまいてみたいものです。

今回3日間の台湾で僕はニーハオとシェイシェイだけで乗り越えることができました。

っということで「日本語だけでもなんとかやっていける!!」と謎の自信を身につけ帰国しましたとさ。




家族写真 〜 江津湖広木公園 〜





中高のサッカー部の先輩に頼まれ江津湖で家族写真の撮影を行いました♪
もぉ江津湖での撮影はまちがいないですねw

どうにか工夫すればいい感じになりますw

先輩に子供の名前と間違わられ「みきおっ!」って呼ばれた時は思わず固まってしまいました。笑

この子は将来僕みたいな天パになるんだろうか。



佐賀バルーンフェスタ





↑地元佐賀をこよなく愛すイケメンカメラマンの大渡さんと偶然お会いしました♪


帰り道には男二人で花屋&ドライフラワー&カフェのラズリさんへw
僕がドライフラワーが大好きだと知る友人が連れてってくれました!

まぁそら女子かカップルしかいませんわな・・・・。笑





阿蘇 すすきの迷路



佐賀を後にしそのまま阿蘇にススキを撮りにいきました!




いやぁ〜〜〜「あきぃ〜〜〜〜〜〜!!!」って感じですねぇ〜〜〜〜♪

阿蘇はやっぱり気持ちいですねぇ〜〜〜〜〜♪



ゆうすい自然の森(旧:遊水峡)







最後は小国にあるゆうすい自然の森へ!!!

先ほどのススキよりももっと「あきぃぃぃぃ〜〜〜〜〜〜〜〜〜!!!」ってなりましたね。
ちょうど太陽もいい感じの位置でこれまたもぉフレア祭りでしたよ!!!(しかしアラキはたいしてフレアをうまくあやつれない。)


ってな感じで今回はこの辺で終わりたいと思います。




最後に


みなさん今回からシリーズ化候補として始まった「荒木未希夫のFUJIFILM T10お散歩記録 – Part1」はどうでしたか???

賛否両論あるかと思いますが、
第一回目ということなのでお褒めのお言葉限定でお待ちしておりますm(_ _)m

最近特に人物の撮影が好きになってきて、
ありがたいことに家族写真や七五三などの撮影以来が増えてくるようになってきましたo(^▽^)o

これからもたくさん様々な写真を自分なり撮っていきたいと思いますので、
次回ブログもお楽しみにぃ〜〜〜〜〜〜(・ω・)ノ



あとFVメンバー5名で運営しておりますInstagram公式アカウントもよろしくお願い致しますぅ〜〜〜〜〜〜♪


HP用の原稿はこう作ろう!〜作成手順とポイント〜

yamamoto
2017/11/08
閲覧所要時間:約4


こんにちは、ヤマモトです!
今回はホームページを制作する上でもっとも重要で、もっとも難関な「原稿作成」について
弊社なりの「よりいいHPにするためのテキスト作成手順」についてご紹介したいと思います。

もしあなたが「自社HP用の原稿作成」をお願いされたとしたらどのように感じますでしょうか?
「めんどくさい・・・」「大変そうだなあ」「書いてる時間がない!」「どう書いていいかわからない!」などなど・・・正直こんな風に思う方が多いんじゃないでしょうか?

・・・お気持ちはすごくわかります。

ただ、より良いHPになるか、ありきたりな普通のHPになるかはここにかかっているのです!!
御社のHPにアクセスした人が、御社に興味を資料請求やお問い合わせをしてくれるかどうか、それとも他社のサイトに行くかどうかを決定するのは、「コンテンツの内容」つまり、お客様に書いていただく「原稿」が最重要なのです。

ここでは、基本的な原稿の書き方、書く上での考え方を紹介していきたいと思います!!

ステップ1 「誰に向けて書くか」を明確に!


「誰に対して、何を、どう伝えるか?」

常にターゲットユーザーを意識して原稿を用意することがとても重要なポイントとなってきます。
良い原稿とは「サイトを見たお客様に対して有益な情報を与えられる」ものです。

※よくあるケースで、「全てのターゲット(層)」に見てもらいたいとおっしゃられることもありますが、これは結局全ての層に響かないものなるのが常です。欲張らずにターゲットは必ず絞るようにしましょう。

Point
・お客様目線でHPにきた方が何を知りたいのかを想像して書くのがコツです。
・迷った時は、競合の他社サイトを参考にしてみるのも良いでしょう!
・他社のサイトをそのまま真似するのではなく、御社独自の強み・特徴を考えましょう!



ステップ2 大まかな章立てを組む


はじめから「うまく素敵な文章を書こう!」と思ってしまうと結局なかなかペンが進みません。
まずは、ざっくりとした文章を「箇条書き」にしていきましょう。
この作業を行うと、「この内容の前にこれを持ってこないと意味が通じない」など今まで漠然としていたものが徐々に整理され、文章を展開していく順番も少しずつ固まってくると思います。



ステップ3 コンテンツの「見出し」を決定する


ユーザーがホームページ内の文章を全て読んでくれるなんてことははまずありません。(私もそうです)
重要な見出しをみて、各個人に必要な部分のみを読んでいくパターンがほとんどです。
そのため「見出し」がユーザーにとってとても重要なポイントになります。

Point
ページごとに重要な項目となるタイトルを入れてみます。
その見出しが必要が不要かを選別して、ブラッシュアップしていきましょう。
見出しタイトル(それぞれの内容のキャッチコピーにあたるもの)も決まってより全体の構成がわかりやすい内容になるはずです。


ステップ4 見出しごとに文章を書いてみましょう!


ここでも大切なのは、完璧な文章を書こうとしないこと。

Point
・普段お客さんに話している内容・資料を整理することも重要なポイントとなります。
・文章の枝葉や体裁にこだわらないで、話し言葉でも良いのでどんどん書いてみましょう。


ステップ5 全体の見直し。その文章、本当に必要?


あまりに長い文章はそれだけでユーザーが敬遠します。
特にスマホサイトで閲覧する場合は、縦スクロールでざっと流し読みする傾向が強いので、
詳細のテキストのボリュームにも気をつけなければいけません。
余分なテキストはできるだけ省いていきましょう!

最終ステップ この内容で本当に伝えたいことが伝わるのか考えよう。


作成した原稿を「第三者の目」で評価(チェック)してみましょう。
自分が読みやすいと思う文章がそのまま、他の人が読みやすい文章とは限りません。
御社のことを全然知らない方に、作成した原稿を読んでいただき、意味が通じなおかつ興味を持ってくれたら大成功です!

その判断をするために可能な限り、社外の方に一度チェックしていただくことをおすすめします。
もしくは、作成した文章を時間を置いて、冷静な状態で自分でチェックしてみるのも一つの方法です。


最後に


ホームページ制作というものはただ単にキレイに、カッコよくすることではありません。
ユーザーにとって有益な情報や、御社の強み・魅力を見やすく・わかりやすく表現できてこそ初めてWEBサイトの効果が得られます。
そのためには、やはり社員の方の想いの詰まったテキストが必要になります。

また、こうした原稿制作を進める上で、社内を見つめ直すことによる新たな発見がかもしれません。
サイト制作時だけでなく社内外できっと役に立つことになると思いますので、ぜひ取り組んでいただければと思います!



最新JavaScript 「ECMAScript2015」を誰にもバレずに、こっそりさわってみる

sawamichio
2017/11/06
閲覧所要時間:約8

最近癒しを求めて、こそこそJavaScriptを書いている
クリエイターのSAWAMICHIOです。

実はJavaScriptは2015年6月に「ECMAScript2015」「通称ES6?」と呼ばれる新仕様が発表され、
大きな進化を遂げでいるのを今更ながらピックアップしてみました。

JS以外のプログラミング言語を深く知るわけではないのでなんとも言えないのですが、
新仕様で特に注目を集めてそうなのがclass構文の追加です。

それまではプロトタイプという非常にわかりにくい苦行のような書き方だったのですが、
ES6ではよりポピュラーな記法でクラスを定義できるようになったようです。

従来のプロトタイプベースでのクラス(コンストラクタ)の定義

function Person( name, gender ) {
  this._name = name
  this._gender = gender
}

Person.prototype.string = function() {
  return this._name + 'は' + this._gender + 'です。'
}

var sawa = new Person( 'SAWAMICHIO', '男' )
console.log( sawa.string() )


↑よくある例です。はい。
関数を作ってそれをnew演算子を介して呼び出すと急にコンストラクタとして動作し、
インスタンス化したオブジェクトから親クラスのメソッドにアクセスできるというやつです。

↓同じことをこのように書き換えることができます。

最新のクラス構文でのコンストラクタの定義

class Person {
  constructor( name, gender ) {
    this._name = name
    this._gender = gender
  }

  string() {
    return this._name + 'は' + this._gender + 'です。'
  }
}

const sawa = new Person( 'SAWAMICHIO', '男' )
console.log( sawa.string() )


「class クラス名」でクラスを定義する書き方は、
JavaやC言語ではおなじみらしいのですがワタシは知りません。
クラスからオブジェクトを生成するコンストラクタは、そのものズバリ
「constructor」で定義するようです。
コンストラクタの定義は省略することもでき、
省略した場合は、「constructor(){}」という空のコンストラクタが
暗黙のうちに定義されます。

クラスを定義したら、new演算子でクラスからオブジェクトを生成できます。
この辺は一緒ですね。

またクラスの定義は下記のようにクラスリテラルで記述して、
変数に代入する書き方もできます。

クラスリテラルを使ってコンストラクタを定義する

const Person = class {
  constructor( name, gender ) {
    this._name = name
    this._gender = gender
  }

  string() {
    return this._name + 'は' + this._gender + 'です。'
  }
}


static修飾子で静的メソッドを定義できる

上記までのものは、単に書き方が変わっただけっぽかったのですが、
クラス構文には静的メソッドを持たせることができます。
この場合、オブジェクトをわざわざインスタンス化することなく、
「クラス名.静的メソッド」で実行できます。
class Calc {
  static sum( num1, num2 ) {
    return num1 + num2
  }
}

console.log( Calc.sum( 5, 5 ) )

[実行結果]
10

setter/getterを使ったプロパティの定義

ここではsetter/getterを使って
Personクラスにageプロパティを追加しています。
class Person {
  set age( value ) {
    console.log( 'setter呼び出し' )
    if ( value < 0 ) {
      throw new RangeError( 'ageは正数で' )
    }
    this._age = value
  }

  get age() {
    console.log( 'getter呼び出し' )
    return this._age
  }
}

const kawaguchi = new Person()

kawaguchi.age = 22
console.log( kawaguchi.age )

kawaguchi.age = -22
console.log( kawaguchi.age )


[実行結果]
setter呼び出し
getter呼び出し
22
setter呼び出し
x RangeError: ageは正数で
setのコードブロックがsetterで、ageプロパティに値を設定した時に自動的に実行されます。
同じくgetのコードブロックがgetterで、ageプロパティから値を取得しようとした時に自動的に実行されます。


setterを省略して読み取り専用のプロパティを定義する

class Person {
  get age() {
    console.log( 'getter呼び出し' )
    return this._age = 22
  }
}

const kawaguchi = new Person()
console.log( kawaguchi.age )

kawaguchi.age = 92
console.log( kawaguchi.age )


getterを省略して書き込み専用のプロパティを定義する

class Person {
  set age( value ) {
    console.log( 'setter呼び出し' )
    if ( value < 0 ) {
      throw new RangeError( 'ageは正数で' )
    }
    this._age
  }
}

var kawaguchi = new Person()
kawaguchi.age = 22
console.log( kawaguchi.age )


extends構文を使ったクラスの継承

class Person {
  constructor( name, gender ) {
    this._name = name
    this._gender = gender
  }

  string() {
    return this._name + 'は' + this._gender + 'です。'
  }
}

class FrontierVision extends Person {
  constructor( name, gender, job ) {
    super( name, gender )
    this._job = job
  }

  string() {
    return this._name + 'は' + this._job + 'です。'
  }
}

const kawaguchi = new FrontierVision( '川口', '男', 'エンジニア' )
console.log( kawaguchi.string() )

クラスの重要な機能の一つにオブジェクトどうしの継承関係を築けるというのがあります。
JS自体、Objectを頂点とした壮大な宇宙を構成しているように
あるクラス(親クラス)から、そのクラスのメソッドやプロパティを引き継いだ(子クラス)を定義できる機能です。

従来はプロトタイプ継承というJS特有の?やり方で実現していましたが、新しい構文では「extends」という構文で継承を実現できるようになり
よりシンプルにわかりやすく表現することができます。

新しいclass構文によってガラリと変わった印象を持ちますが、内部的にはやはり従来通りのプロトタイプベースのようです。
その証拠にclass構文で定義した Personをtypeof演算子で確認すると function(関数)と表示されます。

さらに「Person.prototype.プロパティ = 関数リテラル」という従来の記法でメソッドを追加することも可能です。

表面的にはガラリと変わって新しい言語かのようになりましたが、実態は
今までのJavaScriptそのものということで安心できますね。
いちいち学習し直さないでいいですから。
他にも気になる機能がたくさん追加された「ECMAScript2015」ですが、それはまた次の機会に

御免。

フロンティアビジョンのFacebook

デンタルWEB

求人情報

スタッフ紹介