はじめに-WHYの話をします突然ですが、2019年1月にPLAN-Bクリエイティブユニットの事例サイトがリニューアルされました。とても素敵なサイトで、チームとしても満足がゆくものができたと感じています。 リニューアルに際してのコンセプト・アイデアだし、そのコンセプトとアイデアのサイトへの落とし込みは、デザイナーの岡本が中心として進めてくれました。 いわゆる「モノができるまで」、HOWの過程にかんしては、別で岡本が記事を書いてくれたのでそちらを御覧ください。 今回は、WHY（なぜ）リニューアルに至ったか、をお話したいと思います。 9ヶ月という短い時間でリニューアルしちゃいたくなったわけ。すでにBOOKという名前で2018年1月に公開されていた事例サイト。 ※2018年1月に公開されたBOOKサイト（近影） しかし、公開から9ヶ月後の2018年9月頃には、すでにリニューアルのプロジェクトが進ん

PLAN-Bクリエイティブ&ライティング（以下PB-CRW）実績サイトをリニューアルしました。 今回は、このリニューアルプロジェクトの背景と共に、Webサイトに込められた「メッセージ」を体現できるデザインについてお話したいと思います。 リニューアル経緯リニューアル前の実績サイトは、ブランディングを目的としておらず、本のように実績をまとめ、閲覧できる環境をという目的で「BOOK」というサイトを運用していました。この段階ではコンテンツの内容、クレジットなどの詳細な情報は掲載しておらず、実績が着実に積み上がってきたタイミングで、イメージ刷新を含めたリニューアルをするという運びとなりました。 要望と課題の整理まずは、プロジェクトチームでブレストし、ざっくばらんに今回の実績サイトへの要望を上げていきました。叶えたい要望、現状Webサイトの課題、CVの獲得や認知拡大などが様々な要望が上がります。 市場

この物語は、ある新米エンジニアが、会社で行われる年末の大忘年会を史上最高に盛り上げるシステムを作った記録である。 プロローグ10月某日。 僕は会議室に呼ばれ、上司から以下の命題を授かった。 上司「毎年会社で行われている忘年会を例年以上に盛り上げる、全社員が参加出来るゲームを作って欲しい」 …ん？よく分からないがとりあえず難しいことを言われている気がする。。 上司「4択のクイズで会社のことがより理解出来たら良いな」 クイズか…。確かに全社員が参加出来たら面白そうだ！やってみよう！ さぁどんな技術を使おうか？やる、とは言ったものの何をどう作るか頭がごちゃついてきた。 そうだ、一つずつ整理してみよう。 まず、作るべきものは「全社員が参加出来るクイズシステム」だ。 全社員が参加出来る、かつクイズをやるということなのでスマホを使えば出来そうだ。 当日は立食パーティ形式で前方にスクリーンがあるので、そ

みなさんは、格闘技は好きですか？ そして、プロレスラーは好きですか？ 僕は好きです。格闘技は全般好きなんですが、特にプロレスが好きです。プロレスラーって、華があるし、大きいし、何より攻撃をよけないんです。 いや、よけますよ。よけるんですが、大抵は技を受けます。自分のストロングポイントで、技を受けて強さを証明します。 こんな強さの象徴であるプロレスラーですが、憧れるとともに考えることがあるんです。 「最強のプロレスラーってなんだろう。」最強のプロレスラーの素質って何があるのでしょう？ 例えば・・・ ちょっと考えただけでも、いろいろ出てきます。けど、これをプロレス好きの知り合いに話してみると、 「悪役レスラーって顔は怖いし、天龍なんて声ガラガラでマイクパフォーマンスは何言ってるかわかんないじゃん。けど、強いプロレスラーではあるよ。」 確かに。 こう、なんか、思い思いに自分が思いつく枠だけで考え

マニュアルとは、露出（写真の明るさ）をすべて自分でコントロールして撮影するモードです。場面に応じた適正露出を見つけなければならないため、露出についての理解が必要ですし、設定を細かく調整するため手間がかかります。 「プロが使ってそう……」という印象を持っている方がいるかもしれませんが、実はそれほど頻繁に使うわけではありません。すべてをマニュアルで撮影するカメラマンもいるかもしれませんが、実際はシーンによって使い分けています。 「普通にキレイな写真」を撮るのであればマニュアルモードをあえて利用する必要はありません。ですが、マニュアル撮影を覚えることによって、その他のモードでは撮れない、現実をデフォルメしたような美しく印象的な写真が撮影できます。 今回は、マニュアル撮影の3つの要素、各モードの特徴とデメリット、そしてマニュアルの魅力についてご紹介します。 マニュアル撮影の3要素。明るさを変えよう

「アレをアレして、次にコレを…違う違う！アレをコレするんじゃなくて、アレをアレ…」 エンジニアとプランナー、開発と運用、身近なところでは自分と実家の母とのパソコンが動かなくなった系の相談など、お互いの持っているスキルや情報が違う(=情報の非対称性がある状態)とよくあるやり取りではないでしょうか。でもこの厄介なやり取りの原因が自分の癖だったら? または少しやり方を変えるだけで改善できるのであれば? 今回はゲーム「Keep Talking and Nobody Explodes」を使った、自分のコミュニケーションの癖や改善方法を見つけるワークを事例つきで紹介します。 こんな方におすすめです。 新しいチームができた時、新しいメンバーが入ってきた時メンバー間のコミュニケーションの癖やスキルがわからない、不安があるチームビルディングの手始めに、楽しく学べるワークがしたい情報の非対称性がもたらす不幸先

JPEG、GIF、PNG、BMP、TIF、 EPS…画像フォーマットは多々あります。Webサイトをコーディングする際には、使う画像とその目的に合わせて拡張子やサイズを選ぶことになります。 ホームページ上に画像を表示するためのフォーマットとして、これまでJPEG、GIF、PNGが多く用いられて来ましたが、ここ数年は、Web制作で使用する画像はSVGへと目まぐるしく切り替わってきました。すべての画像をSVG化！とまでいかなくとも、ロゴやアイコンをSVGで作成して読み込むサイトが増えています。 どうしてここまでSVGフォーマットが広まったのでしょうか？「アイコン」の表示をメインに、改めてその理由を振り返ってみます。 Web制作で利用されるアイコンの種類アイコンは、サイトの中のワンポイントです。タイトルや項目の分類に使われます。 アイコンの一例 アイコンはサイトを楽しく表現したり、細部を彩るのと同

どちらも、先人たちが画面上でトライアンドエラーを繰り返し、定着したもの。私たちデザイナーは普段の業務で、これら先人たちの”ノウハウ”とも言えるお作法・トレンドを自身の制作物に取り入れています。この「お作法・トレンドを取り入れる行為」は、デザイナーとっては”当たり前”です。 しかし、その当たり前の行為をためらいなく行ってしまう自分を、一度見直した方が良いのではなかろうか？というのが本記事のテーマとなります。 「当たり前」は思考停止のアラート私たち制作する側の人間は、お作法やトレンドを、普段から当たり前のように自身のデザインに取り入れていますよね。なぜなら、最低限トレンドに沿った「それっぽい」ものができるからです。しかし、それは極端な話、「思考停止」と言い換えられるのではないでしょうか？ トレンドは刻一刻と変化し、今日使った表現が明日には時代とミスマッチ、ということにもなり得ます。お作法も同様

いくつもの画面設計を重ねていくと、このような状況に陥ることはありませんか？ 「この部分の設計は、昔作ったあのサイトと同じ感じに」 「他社さんが作ったここイケてる！この部分をまねしよう」 というように、どこか他のサイトの「まねごと」だったり、過去に作ったサイトの「いいとこ取り」をしていたり。私自身、（深い理由もないまま）部分的に他のサイトのまねをして、画面設計をしていたこともあったと思います。 どうしてこのサイトに、この要素が必要なのか、なぜこの位置にあるのか、そしてそれがユーザーにとって本当に使いやすいのか。その理由が説明できないことに、モヤモヤしたことも。 そんな私ですが、この後お伝えする「構造化シナリオ」という考え方を使うことで、サイトを使うユーザーにとって「本当に欲しい情報」「価値を感じる情報」を、その優先度順に設計することができました。 「構造化シナリオ」を使う前は、どことなく難し

弊社の取り扱う広告媒体の全体図と、リスティング広告、ディスプレイ広告を中心として運用スキームをご紹介しております。 新生活が始まって2ヶ月ほど過ぎましたね。転職してきた人、新社会人の方々は少しづつ新しい環境に慣れてきた頃だと思います。そんな、この春Web業界に飛び込んできた皆さん、会議中耳慣れない単語を沢山耳にしませんか？ インターネット広告で使われる言葉は、覚えにくいものが多いです。打ち合わせ中に先輩や同僚に聞きたいけど、全て聞いていたら話を妨げてしまうし、知らない単語が多すぎてどんどん話についていけない状態に…。 私は約1年前にデザイナーとして広告代理店の事業部に配属されたのですが、それまで広告用語を使う機会が全く無かったため、始めはまさに上記のような状態に陥っていました。 そこで、新社会人・転職者・そして”耳にするけど、実は広告用語は全く分からない技術職”の人のために、広告運用者との

「自社の商品を発信するために記事を書こう」「自分の得意分野でブログを書いてみよう」「情報を自ら発信していきたい」などと意気込んでサイトを開設して記事やブログを書いてみたものの、全然セッション数が伸びないしそもそも検索結果に表示されないとお困りではありませんか。 本記事を読んで頂くと を知ることができます。 このようにコンテンツSEOはなかなか一筋縄ではいかないものです。 以下の記事に書いている成果の出ないケースに当てはまったら、コンテンツSEOの改善が必要です。 ・SEOで成果が出ない時にチェックすること｜中級者でもやってしまうミスを紹介 また、こちらの資料でコンテンツの品質をチェックすることができます！SEOでは高い品質のコンテンツが求められるので、リリース前のチェックは必ず行いましょう！ コンテンツSEOとは、SEO対策の中の内部対策・外部対策・コンテンツSEOの中の１つであり、良質な

💡こちらの記事は、当メディアPINTO!内で扱っているSEO対策に関する記事をすべて網羅している、いわば教科書のような記事です。いつでも戻って来れるように、ブックマークしておくことをおすすめします！ この章のまとめ SEO対策とは、「検索エンジン上で自社サイトを上位表示させるための対策」のこと。SEO対策で大切なのはユーザー目線。ただし、Webサイトを正しく認識してもらうための工夫も必要！SEO対策をするメリットは、Webサイトへの流入が増えることや、広告運用よりもコストが低くなること。また、コンテンツはWebサイト内に溜まっていくため、広告のように掛け捨てにならない！一方で、効果を感じるまでに時間がかかることや、専門的な知識が必要な点には注意が必要！ SEOとはSearch Engine Optimization（検索エンジン最適化）の略で、Web集客の手法の一つです。Googleなど

どうも。新規事業担当のジミーです。 自分の職種柄、どのように自分のサービスを世に広め、価値を感じてもらうかということに脳を動かすことが多いのですが、一人で考えるよりも発信してPINTO!を読んでいただている方々と、あーでもないこーでもないと言っている方が脳にいい刺激をもらえるので、コラム形式で色々自分の脳みそを晒して行こうと思います。 How toや勉強式ではないので悪しからず。 代理店からよく聞くワードランキング８位の「自分ごと化」(※ランキングはただの私の所感です。気にしないでください。) さて、ただの広告ではなく、良い広告になるひとつの要素として存在する「自分ごと化」。 どこの誰かも知らない人が考えたキャッチコピー、クリエィティブ、ストーリーに自分を重ねてしまうことで、毎日バカみたいに脳になだれ込んでくる何万もの情報の中において、脳の中でも特別なエリアである「私の情報BOX」に格納さ

突然ですが皆さん、ライセンスのお話はお好きでしょうか? 何となく避けてしまいがちなライセンスのお話。私も含め多くのWeb制作に携わる方が「面倒くさい・多すぎて意味不明」などと思っていることでしょう。ぶっちゃけいいますと、特段詳しくなる必要はなく、正しい判断が欲しければ専門家に委ねればいいわけです。 ただ何も知らないというのは無知蒙昧。Web制作に携わる者であれば是非ともさわりぐらいは知っておきたい所です。というわけで、今回は特にデザイナー・エンジニアに関係してくるライセンス周りについてまとめてみました。 ライセンスって何?ざっくりと一言で説明するなら「利用者が守らなければならない決まりごと」です。色々難しい言葉で説明されていたりしますが、要するに「利用するならこのライセンスで定義された決まりごとを守ってくださいね。守らないと著作権法の下で罰則が適用されるので注意してね♪」ということです。

bz2, xz, Deflate, gzip, zip, snappy, …データ圧縮に関しての名前です。 なんとなく見覚えがあるだけのものから、普段使いしているものまで色々あって、なんとなく使ってはいるけれど、それぞれどのような意図を持って使い分けたら良いのでしょうか。そもそもどんな違いがあるのでしょうか。 この違いがちゃんとわかっていたら、なんとなくかっこいい気がしませんか？というわけで、今回は圧縮アルゴリズムの歴史と、特性を追っていきたいと思います。 可逆圧縮と非可逆圧縮の違い圧縮をまず大きく大別すると、可逆圧縮と非可逆圧縮に分けられます。その名の通り、元に戻せる圧縮方法と、元には戻せない圧縮方法です。非可逆圧縮の用途には音声、画像や動画などの圧縮があります。 データとしてはわざと欠落させるけれど、人間の認識には影響の少ないようにするものがあります。用途、画像でよく使われるJPEGや

デザイナーの方は経験がないでしょうか？ 案件のサイト制作が進むにつれて「あれ、パーツにばらつきがあるな…」「この動きじゃないのに…」「もっと早くエンジニアに伝えていれば…」ページが出揃いだしてから微妙な差異に気付いたり、納期直前で指摘しづらくなってしまったり。かく言う私もそんな経験のあるデザイナーの一人でした。 ほとんどのサイトがデザイナー1人で作られているわけではありません。サイト規模、プロジェクト規模により、チーム体制も変わりますが、エンジニアやデザイナーが複数人でサイトを作り上げることも多いのではないでしょうか。フリーランスのデザイナーであれば外部リソースとのやりとりなどが必要になる場合もあります。 今回はサイト制作時に役立つだけでなく、公開後のデザインを長く保ち、サイト規模が大きくなるほど重要になるデザインルールを共有するための、スタイルガイドに着目したいと思います。 スタイルガイ

「心震える瞬間を、 ともに」 想像以上の成果や成長を得られたときこそ、心震える瞬間は訪れる。 そこには常に、大きな目標と挑戦。 どんな困難でも諦めない自分。 そして、同志の存在が不可欠である。 私たちは、「HEROSHIP」「PROFESSIONAL」「HOSPITALITY」というSPIRITを日々体現し、 顧客満足の基準となることで“世界中の人々に「！」と「♡」を”というMISSIONを果たしていく。 そして、今。 全ての事業領域で業界No.1になる、という大きな目標を掲げる。 この物語の主人公は、社員一人ひとりである。 一人ひとりが挑戦と困難を通じて、想像以上の自分を創り上げ、 一人では成し得ない大きな目標とMISSIONを、ともに果たそう。 その先に待っている、心震える瞬間を、ともにしよう。

最近、また新しいキーボードが欲しくて仕方がありません。 以前読んだ本にあった「仕事の為に投資したお金（何分の1かは忘れた）が自分の年収に返ってくる」という格言がトリガーです。ただキーボードが欲しい訳ではなく、仕事への投資ですね。 で、どうせキーボードを買うなら高級キーボードだなぁということで、高級キーボードについて自分なりに簡単にまとめてみました。 高級キーボードと低価格キーボードの違い 違いその1：打鍵感打鍵感（入力時のボタンを押し込んだ感じ）が違う。 キーボードが採用している内部の仕組みでパターンは複数ありますが、高級キーボード系はどれも押し心地が大変良いです。キー入力のストレスが減る可能性が高いです。 違いその２：打鍵音打鍵音（キータイピング時の入力音）が違う。 「カタカタ」、「パチパチ」、「スコスコ」など、キーボードの種類によって大きく異なりますが、趣深いアナログ感を感じる打鍵音が

受注、発注側に関わらず、Web制作に携わる人が普段何気なく使っている用語「テーマ」「コンセプト」「アイデア」。 この3つの用語は普段の会話の中ではもちろん、コンペや会議などの重要な場面でも頻繁に使われます。このように様々な場面で使われている用語ですが、「コンセプトって何？」「テーマとコンセプトって何が違うの？」と聞かれた時に、きちんと説明できる人は少ないのではないでしょうか。 実は、あいまいな用語に対しての認識をすりあわせておかないと、業務で支障が起こる可能性があります。今回は、Web制作における用語に対する認識の違いが招く弊害を、体験談をもとにお話していきます。 用語の認識が違うだけでこんなことが起きるの？Web制作のお仕事は、1つのWebサイトを納品するために、ディレクター、デザイナー、フロントエンドエンジニアの3職域で進めていきます。 それぞれ違う職域のメンバーがミーティングを行う中

サイト制作をする前に必ず作らないといけないワイヤーフレーム。 「ワイヤーフレームってデザインの下書きでしょ？」 というような認識の方もいらっしゃるのではないかと思いますが、それは間違いということをこの記事を読んで知っていただきたいです。 これからワイヤーフレームを作成しないといけないという方や、制作会社からあがってきたものを評価しなければならないという方は、ワイヤーフレームをなんのために作るのかをぜひ知っておいてください。 PLAN-Bクリエイティブユニットのワイヤーフレームの考え方をご説明します。 ワイヤーフレームはデザインの下書きではないワイヤーフレームに対する勘違い作成する側も評価する側も一度は陥ってしまうのではないかというのが、ワイヤーフレームにデザインを求めてしまうことです。自分自身初めてTOPページのワイヤーフレームを作成した時に、コンセプトを表現するようなデザインにするにはど