点線を可変にして文字の大きさはそのまま、点線だけが伸縮してレスポンシブ。

目標は以下の通り。

PC版

タブレット版

スマホ版

スマホ版では点線を取っ払って上下にテーブル的に見せる、でもいいかもしれません。

こんな感じ。

タブリーダーを作るときのHTMLタグ、CSSタグ

HTMLはこちら

<ul class="tab-reader">
<li class="flex">
<span class="tab-reader-box1">タイトル</span>
<span class="tab-reader-box2"><hr class="tab-r-line"></span>
<span class="tab-reader-box3">500円</span>
</li>
<li class="flex">
<span class="tab-reader-box1">タイトルタイトル</span>
<span class="tab-reader-box2"><hr class="tab-r-line"></span>
<span class="tab-reader-box3">500円</span>
</li>
<li class="flex">
<span class="tab-reader-box1">タイトルタイトルタイトル</span>
<span class="tab-reader-box2"><hr class="tab-r-line"></span>
<span class="tab-reader-box3">500円</span>
</li>
</ul>

リスト表記にしたかったのでli要素の中をflexで横並びにしていきます。

CSSタグはこちら

.flex {
display: flex;
display: -ms-flexbox;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
width: 100%;
}

hr.tab-r-line {
position: relative;
top: calc(50% - 1px);
margin: 0 10px;
border: none;
border-top: dotted 2px #CCC;
}

.tab-reader-box2 {
flex: auto;
}

解説

ポイントはflexプロパティで、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。
flexプロパティは一括指定プロパティです。
分割すると以下のような指定値になります。

.tab-reader-box2 {
flex-grow: 1; /*フレックスアイテムをどれだけ伸ばすか、どれだけ長くするか*/
flex-shrink: 1; /*フレックスアイテムをどれだけ縮めるか、どれだけ短くするか*/
flex-basis: auto; /*フレックスアイテムの初期の寸法はどれくらいにするか*/
}

つまり、tab-reader-box2については「伸びるし縮むよ！　初期のサイズは他のフレックスアイテムに応じるよ！」という指定にしているんですね。

そして、その中に入っているhrの指定ですが、

hr.tab-r-line {
position: relative; /* 君「ここ」にいてね */
top: calc(50% - 1px); /*「ここ」ってのは親要素の一番上から50%と1px下がったところだよ */
margin: 0 10px; /* 左右の余白は10pxとってね */
border: none; /* とりあえず線はいらないよ */
border-top: dotted 2px #CCC; /* でもやっぱりtopのborderだけだしてね */
}

borderで2pxを指定していますが、box-sizing: border-box;をしていても、いずれにせよ線はきれいにセンター揃いになりません。
2pxで指定しても、1px上にあげることでセンタリングしています。(top: calc(50% – 1px);の「-1px」はborder-topの太さの1/2です）

また、hrはブラウザのデフォルトでborder-widthを1px持っていることがありますので、これをborder: noneで一度打ち消しています。hrのリセットって忘れがちなんですよね……。

結果

こんなふうになりました。

また、レスポンシブでテーブルのようにしたい場合は、以下のCSSを上記に付け加えます。

@media (max-width: 600px) {
span.tab-reader-box2 {
display: none;
}
span.tab-reader-box1, span.tab-reader-box3 {
width: 100%;
text-align: center;
border: 1px solid #CCC;
}
span.tab-reader-box1 {
background: #CCC;
}
}

今のところこれが一番効率よくレスポンシブしてくれるような気がします。
他にやり方があったら追記していきます。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

ポートフォリオってなんですの？

普通に生きてきたらポートフォリオという単語自体にあんまり聞き覚えのないことでしょう。
ポートフォリオを直訳すると「折りかばん」「書類入れ」という意味で、「書類を運ぶ平らなケース」のことを示します。語源はイタリア語の「Portare：運ぶ」「foglio：シート」から。バインダーやファイルのようにまとめてきちっと整理してある、というよりも、もっとラフに、「紙を入れて運ぶ」のようなイメージをしていただければ大丈夫です。

このポートフォリオは、業界によって少しずつ意味が違います。検索すると「？」となることもありますが、おおむね以下のような感じ。

• クリエイティブ業界においては「自己作品集」
• 金融業界においては投資家が持っている株式や現金、不動産といった「金融商品一覧」
• 教育業界においては個人個人の学習の軌跡や活動を記録し保管する「個人評価シート集」

いずれも共通しているのは「パッと見た時にそのシート集が何を意味しているのかわかる」ように作られている、ということです。

クリエイティブなポートフォリオなら「ああこういう意図でこういう目的で作られたんだな」金融業界なら「ああこの人の金融商品はコレとコレとコレで分散されているんだな」教育業界なら「ああ誰それの部活動の記録で上位に食い込んだんだな」などといったことですね。

クリエイティブ業界にポートフォリオってなぜ必要なの？

以上のようにポートフォリオというのは、「何かをプレゼンテーションするときにその過程と結果を同時に説明できるスライド」のような役割を持っていると言えます。
就職活動や転職活動においては自分を売り込んでいく作業が必須。自己紹介、という「自分プレゼンテーション」をスムーズに行うためにも、このポートフォリオって大切なんですね。
特にクリエイティブ業界では、この作品集がキーになることもしばしば。これがなければお話になりませんよ、なんてことが普通です。何せ、その作品こそがその人の売りになる業界ですから！
何一つクリエイティブな作品がない、ポートフォリオなしで面接に挑み、「気合で何とかします！」「頑張りで覚えます！」なんて言っても、そんなリスク背負ってくれる会社は一社もありません。せめて一つくらい何かわかる作品を出してください、と思うのが普通です。

もっと柔軟に考えると、ポートフォリオは作品版履歴書、みたいなイメージです。

（別にクリエイティブ業界だけにとどまりません。実は多種多様な業種にポートフォリオって有効だと思います。普通に営業職でもプログラム職でもアパレル系の店員希望でも、「私は大学時代にこんな活動をしました！」「これまでの仕事場ではこういった仕事を行ってきました！」といったことを、履歴書やエントリーシートだけでなく、写真やアルバムといったポートフォリオでわかりやすく実現してもいいわけです。）

WEBポートフォリオのハードルは年々上がっている？

自分が学生だったころはみんな自分のWEBサイトを持っていたものですが、今では結構少ないのでは……と思います。
WEBデザイナー志望でない、グラフィックやプロダクト、サウンドや工芸など、アート的デザインは多岐にわたるもの。ポートフォリオもなまのファイルなどになりがちです。
だがしかしそれはかさばる。そして、ポートフォリオを送ってくれ、という企業に送ってしまっては、もう一冊作らねばならない。
あの企業用、この企業用、ポートフォリオを使い分けるのは当然にしても、やはり時代はデジタルです。さくっと簡単に自分だけのポートフォリオサイトが作れたらいいなぁ……と思う人は多いのではないでしょうか。

そんな時に役立つのが無料ホームページ作成ツール。

• Ameba Ownd
• Jimdo
• Wix

大概のサイトがレスポンシブ対応になっているので、スマホやタブレットでも気軽に見ることができるし、また気軽に見てもらうことができます。

今回推していきたいのは「Adobe Portfolio」。

Adobe PortfolioはどのAdobe Creative Cloudにも無償でついている簡易ポートフォリオサイトです。

いまやデザイナーという専門職でなくとも持っている人がいるというAdobeシリーズですが、これに「Adobe Portfolio」がついていて、それを利用している人はあまりいないように思われます。
一番安いCreative Cloudのプランは月額980円（年間11,760円）で、PhotoshopCCとLightroom、そしてAdobe Sparkも一緒に使えるようになります。
つまり、Adobeの製品をCloudプランで契約している人は、Adobe Portfolioがもうすでに使える状態になっているのです。お気づきでしたか？
アカウントやパスの管理は必要なく、すでにあるものを使ってポートフォリオを作れるのであれば、これに越したことはありませんね。

Adobe Portfolioの使い方

まずアプリを起動させましょう。ブラウザでこんな画面になります。

「Get Started Free」をクリックします。すると、いくつかのレイアウトベースが出てきます。
（英語では「最初に、下からレイアウトを選択します。これがあなたのポートフォリオの基礎になります。」「心配しないでも、このレイアウトはいつでも変えられますよ！」と書いてあります）

「View a live example」でデモが見られます。

ざっくりとレイアウト紹介。

Andreas（アンドレアス）

比較的写真数、写真数が多い人向きです。トップページで一つずつのテーマを取り上げ、そのテーマの中に複数の写真、といったような構造で成り立っています。
ギャラリーはライトボックス仕様で、キャプションがあまりつきません。テキストで注釈を入れるよりも、がっつり写真や作品を数多く見せたい人向きのレイアウトです。

Matthias（マティアス）

サイドバーのようにテーマが並び、右側にずらりと写真が並びます。写真をクリックするとライトボックスのようになるのは共通です。トップページにも写真付きでテーマごとに写真が並びます。

Marta（マルタ）

上部メニューが固定になっているので、視線誘導に一役買っているレイアウトです。ロゴが常に上部中央に表示されるので、カラーリングを統一するとユーザーに印象を与えやすいサイトといえます。

Thomas（トーマス）

フルワイドの大胆な写真レイアウトが可能です。トップに見出しがついているのもデモサイトとしてわかりやすいですね。写真や作品の見せ方にこだわりたい人向け。

Lina（リナ）

あまり作品数のない人向きのレイアウト。数の少なさを写真の大きさでカバーするようなイメージです。オンマウスで詳細が見れるようになっていますが、スマホではそれがありません。

Sawdust（鋸屑）

こちらもあまり作品数のない人向きのレイアウトですが、テーマごとの種類は多いほうが見栄えがします。一ページ一ページ丁寧に書き込めるタイプです。

Mercedes（メルセデス）

ヘッダー部分に特徴のあるレイアウト。パッと見た感じを印象的にしたいのであれば、ロゴのあたりにこだわりをもつとよいでしょう。ページもシンプルに見ることができます。

Lukas（ルーカス）

固定メニューレイアウト。Martaと同じような雰囲気を持っていますが、比較的フォトグラファ向けのレイアウトといっていいでしょう。中のレイアウトもパネル式で見やすくなっています。

Linaを使ったサンプルサイトを制作します。

Linaの「Try this layout」をクリックし、サイトを実際に構築していきます。クリックすると「Welcome to your Portfolio.
Your Portfolio website has been created, but it’s looking a little bare. It will soon take shape as you create Pages! We look forward to seeing what you create!」と出てきますが、意訳すると「頑張ってつくってね！楽しみにしてるから！」といった意味です。ナイスな気遣いありがとうです。

「Take a tour」で使い方のレクチャーを受けることができます。

まずトップにロゴを設置しましょう。「INCLOOP」のところにカーソルを持っていくと、編集可能マークが出ます。ここから「Customize」をクリックすると、以下のようなメニューがダイアログとして表示されます。

左側の黒い部分がコンテンツとなっていて、「サイトタイトル」「サイトキャプション」「ロゴコンテナ」となっています。サイトタイトルとサイトキャプションは表示非表示がタブで切り替えられるようになっていますので、応じて変更しましょう。ここではすべて表示させるようにします。それぞれコンテンツをクリックすると、右の白い画面が切り替わります。

横に並ぶタブで「テキスト」「イメージ」「マージン」となっていますが、各々見ていきましょう。

ヘッダーを整える

テキスト

• テキスト：テキストとして入れる言葉
• フォント：フォントの種類とサイズ、行間の指定
• 整列（Align）：左揃え/中央揃え/右揃え
• リンク：どこのページにリンクするのかを選べます。
• タブ「ノーマル」：常時のテキストカラーと、フォントスタイル（太さ、アンダーライン、消去ラインなど）を選べます
• タブ「ロールオーバー」：オンマウスした時のテキストの変化を指定できます。

イメージ

まず下部の「Upload image」でアップロードする画像を選びましょう。ここではロゴを選択します。

画像を選ぶと図のように画像がはいります。画像に対して以下のアクションが可能です。

• 整列（Align）：左揃え/中央揃え/右揃え
• Alt Text：画像の代替となるテキスト情報。テキストブラウザや音声読み上げで必要な情報になりますのできちんと挿入しましょう。
• リンク：どこのページにリンクするのかを選べます。
• タブ「ノーマル」：常時のイメージについてのアクション。最大サイズと、イメージの置き換えなどが可能です。
• タブ「ロールオーバー」：オンマウスした時に変化する画像を指定できます。
• タブ「レスポンシブ」：スマートフォンサイズなどブラウザサイズが小さくなった時にどれくらいの高さを保持するのかを指定できます。あまりこだわりがない場合はさわらなくて大丈夫です。

マージン

余白のことです。画像に対して、上下左右、すべての余白を指定できます。

以上のことがサイトキャプションでも指定できます。

ロゴコンテナについて

ロゴの範囲がどこからどこまでかを指定することができます。基本はそのまま100％指定にしておきましょう。必要であれば上下のみマージンを取っておきます。

以上の作業で画面はこんな風になります。

Mastheadを作成する

メニューの「Masthead」のタブをオンにすると、以下のように画面が変化します。

Mastheadもさまざまなカスタマイズが可能で、メニューとしてはご覧の通りになっています。全部オンにするとこんな感じ。

イメージ

バックグラウンドを指定すると、表示する枠が点線で、画像の大きさを下のスライドで調節できます。

イメージオプション

• ポジション：画像のポジションを指定できます。「Fix position of image on page scroll」にチェックをいれると、画像がスクロールと一緒に移動しなくなります。
• リピート：画像が小さい場合は、画像をリピートさせるかどうか選べます。
• サイズ：イメージで定めたコンテンツエリアに対して、1.コンテンツエリア内にすべておさめる　2.できる限りコンテンツエリア目いっぱいに入れる　3.イメージの大きさを変えない　が選べます。なおコンテンツエリアはブラウザごとに変化するので、これに合わせた変化となります。差し支えなければ2がおすすめです。

カラーオーバーレイ

画像に色をのせられます。お好みで。

その他いろいろコンテンツはありますが、さまざまな効果をプラスするとこんな感じ。

らしくなってきましたね

コンテンツを追加する

ここまでできたら次は左側のメニューや画面の「Add Page」を使って、ページを作っていきます。

左サイドバーの一番上か、画面中央の、プラスのボタンを押すと、以下のような画面が出てきます。

Page

新しくページを生成します。トップページには自動的にカバーとなる写真が入り、そのリンク先として新しくページが生成されます。（例：チーズケーキ/アップルパイ/ショートケーキ）

Lightroom Album

Adobe Lightroomで作成したアルバムをインポートできます。

Lunaはデフォルトでこの「Work」というスペースをもっています。(消せません）こちらにページを追加します。

Pageを追加する

Pageを追加すると、「Destination」をリンク元として、ページを生成することができます。

その後、ページを作成するときに、どんなコンテンツをページに作成するのかが選べます。

• Files　：ファイルをアップロードすることができます。主に画像となります。
• Text　：テキストを挿入することができます。
• Embed　：様々なメディアを挿入することができます。Youtubeやグーグルマップといったタグで何かを共有する場合はこれを使います。
• LightroomPhotos　：lightroomから写真を選ぶことができます。
• CCFiles　：AdobeCloudに入っているファイルから選ぶことができます。
• PhotoGrid　：複数の写真を選んでグリッド形式に表示することができます。
• Form　：コンタクトフォームなどが設置できます。

Photo Gridを選んでみました。編集マークで様々な編集が可能です。

• Reorder Page　：ページを更新します。
• Edit Grid　：順番を並び替えられます。
• Width　：横幅を指定できます。
• Margin　：上下のマージンコントロールができます。
• Delete Grid　：グリッドを排除することができます。

ページコンテンツのメニューはメニューバーに常に表示されています。

フォトグリッドがページに表示されたら、適当に文字を入れます。文字をドラッグして選択している状態で、文字は編集が可能です。また、編集ボタンを選択することで、テキストボックスのサイズを変更したり、マージンをとったり、テキストを排除することができます。

コンテンツとコンテンツの間にカーソルをもっていくと、追加する項目を選ぶことができます。

編集が終わったらサイドメニューバーの「Save Page」でページを保存しましょう。

トップページからリンクされているのがわかります。

ページの見出しやキャプションは、サイドバーメニューの「Edit Info」で行うことができます。

Edit Infoで編集した内容は、ページのヘッダー部分の編集ボタンを押すと、表示非表示が選べます。

Galleryを追加する

デフォルトのWorkは「ギャラリー」と呼ばれるカテゴリに属しており、このギャラリーは増やすことができます。Pageを選択したときのプルダウン一番下か、左サイドバーの「Add Content」で追加することができます。

Work2のギャラリーをつくりました。ここにもページを生成することができます。

例えば、カテゴリーとして

学校の課題作品……デッサン、色表現、立体
自分で請け負った仕事……友人のミニライブフライヤー、アルバイト先でのチラシ制作
卒業制作……写真集を作成したので、その写真がたくさん

などといったものがあった場合、

「学校の課題作品」がギャラリーにあたるカテゴリーになり、

「デッサン」「色表現」「立体」がそのPageとなり、デッサンの写真や実物がPage Contentになります。

PageのなかにPageを入れることはできないので、ギャラリーをうまく使うことがページを上手に作るコツになります。

その他の使い方

コンテンツの横幅やそろえの位置などを自由に変化させることができます。また、カラム数やマージンも自由に変化できます。元がレスポンシブデザインになっているので、よくわからない人はそのままのほうがいいでしょう。
上記２点、ページとギャラリーの追加の仕方さえわかれば、写真をそろえるだけでポートフォリオサイトを作ることができます。

左サイドバーにある歯車アイコン「Edit your Setting」でWEBサイトの詳細を決定

AdobePortfolioはグーグルアナリティクスをセッティングできるシステムをデフォルトで持っています。また、ドメイン（URL）も自分の思うとおりに変更可能、ウェブサイトのタイトルや、メタで入れるディスクリプション、メタタグ、ファビコンなども設置可能。パスワードを入れることもできますので、プライベートなサイトとしても機能します。

公開作業は「Publish site」をクリックするだけ。
そして、ブラウザがあればどこでも編集可能な気安さ。お手軽ですね！

実作業時間30分のクオリティでもこんな感じに作れます。

＞https://incloop-tshirt.myportfolio.com/

使い方がわからない場合はお気軽にお問い合わせをどうぞ！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

身内の誕生日にちょっと横浜まで足を伸ばしたのですが、こんなのやってました。

横浜ベイクォーター：かもめマルシェ

予定も毎回更新されているようですのでご興味ある方ぜひ。かもめマルシェは月に一度のようですね。基本的には11:00～17:00の間で、さほど規模的には大きくないですが、えりすぐりの商品がそろっていました。

ちなみに上記HPから出店も応募できるようですよ。

NKBマルシェ事務局とは、2009年秋より、 生産者と消費者を食でつなげるプロジェクト”マルシェ・ジャポン“に参画している「都市型市場」の運営事務局です。

かもめマルシェはこのNKBマルシェが運営しているマルシェ＝市場の一つですね。他にもYEBISUマルシェやTERRACEマルシェを運営していらっしゃるようで、コンセプトは「食べる人（消費者）が作る人（生産者）と直接会話することで農産物を作る過程のストーリーを知っていただき、顔が見えるコミュニケーションのお力になりたい」とのことでした。地域コミュニティの多数連結を目指しているわけですね。

さてみなさん、上記の「マルシェ・ジャポン」というものをご存知でしょうか。

マルシェ・ジャポン

お恥ずかしながら、私はこの「マルシェ」というもの、お祭りの露店みたいなものだと考えていました。まあ大まかには間違っていないのでしょうが、感覚としては「フリーマーケットやフェアみたいなもの」であり、定期的に開催されているものだとは知らなかったのですね。行った場所でやっていればラッキー、くらいの感覚です。
わたしが「食材を作る人」と「それを料理して食べる人」が出会う場所が、農林水産省の支援で全国で展開されていると知ったのは、実はここ最近のことなのです。

昔の味たまご農場さんから教えてもらった「都市型市場＝マルシェ」

私がこの「マルシェ」を知ったきっかけはこちら。

昔の味たまご農場

はい、インクループのお客様です。大変繊細でなめらかでうっとりとするような濃厚なたまごを楽しませていただいております。毎回打ち合わせにいくM氏に「お願いします！」と言ってたまごを買ってきてもらいます。
余談ですが、この間いただいたプリンが非常にわたし好みのかためのプリンでして……カラメルもこっくりとほろ苦い味わいで……なめらかなたまごの風味でして……よかったらこちらもぜひ……。

閑話休題。

昔の味たまご農場さんは積極的にあちこちのイベントに顔を出されている反面、おいしいたまごの通販にも力を入れていらっしゃいます。それのお手伝いをさせていただいているのが当社となります。

マルシェの存在やその運営のされ方の一端を見て、興味を持ったのがわたしのきっかけでした。
つまり、こういったきっかけがなければ、わたしのようなカスタマーはマルシェの在り方、そこに出店されているお店、商品などに、まったく興味を持たないのです。

土日でお客さまもたくさんいるはずなのに、お店の前を素通りする人のなんて多いことだろう！　とびっくりしてしまいました。規模や知名度、天候の問題もあるかもしれませんが、本当に問題はそれだけでしょうか。

「売り手」と「買い手」の齟齬　～「食べれば」わかるは、もう通用しません！～

ウェブマーケティングをしながらウェブデザインをしている当社ですが、食材や食品、商品を扱う時にこんなふうにおっしゃる方がいます。

「来てもらえればわかる」「食べてもらえればわかる」「使ってもらえればわかる」

正直これらはもう通用しません。
なぜならカスタマーは「行く前に」「食べる前に」「使う前に」わかりたいからです。

地図を見ないで、装備なしで、仲間なしで、冒険に出る勇者は、大概途中で死ぬんです。
そしてカスタマーは死にたくないのです。多くの人は勇者ではないですから。

近年パソコンやスマホによってインターネットが普及し、情報は飽和していつでもどこでも誰でも欲しい情報を手に入れることができるようになりました。新しい情報が生まれる傍らで、古い情報は死んでいき、たまに化石となって残っている、それが現在のインターネットの海の状況です。
中には、店で直接商品を見て、その場では買わず、ネットで購入、なんて例もあるくらいです。特に中型から大型の商品には多い傾向にありますが、小物でもネットショッピングのほうが安いからそっちで……なんてこともあるのです。

つまり、ネットで情報を積極的に配信していない場合、情報は死んでいる、のではなく、「生まれていない」といえるでしょう。
そうなったらどうなるか。「生まれていないのだから存在を認知されない」という、なんですかね、哲学チックなことになります。

• 情報を発信しないと認知されない（知らないものは「ない」と同じ）
• 情報を発信しないと比較されない（商売の舞台にあがれない）

お店を、商品を知ってもらわなければ、カスタマーは「購買意欲」までたどりつきません。これは100％そうだといえるでしょう。昔はそうだった、と言っても、現在は情報の流通によって「買い物に対する慎重度」というのは格段に高まっていますから、昔と比較しても……といったところでしょうか。

食材、食品を購入する際にカスタマーが必要とする情報とは

ではカスタマーは具体的にどんな情報を求めているのか？　という点に関してですが、今回は特に食材についてピックアップしてみましょう。

• おいしさ
• 安全性
• 栄養価
• 値段

この情報は、カスタマー1人1人によって異なってきます。安全性よりおいしさや値段を選択するカスタマーもいれば、値段を問わず安全性のみを求めるカスタマーもいるでしょう。
それを踏まえた上で、以下のようなものが参考としてあげられます。

おいしさ

商品の「個性」。作り手（＝売り手）が他競合と比較された時に胸を張って言い切れるもの。
ここが全くない「無個性」の場合は、大量生産物と変わらないので、尖ることができず、ニッチな部分の需要が高まっている現代において勝ち残っていくのは難しいでしょう。ブランディングの問題です。

安全性

アレルギー、農薬物の使用有無、賞味期限など。

栄養価

商品のベネフィットになります。とくに健康を重視するカスタマーには響きますし、お子さんをお持ちのご家族などもベネフィットになりえます。

値段

税込、税抜、どちらであるかはきっちりと。通販の場合は送料も。

これらはわたしがマルシェに足先を向けた時に「ほしいな」と思った情報がメインになります。
あのですね。

試食だけじゃわからんのですよ。

だって、カスタマーは、農業のプロじゃないんです。

情報を展開するツールは何が必要？

「パンフレットいただけますか？」「もちろんですよ！」

この会話をして、おうちでパンフレットを広げた時に、

「なんっっっっっっっっもわからねえ……」となった人がこちらです。ホームページない！　検索しても出てこない！　SNSもない！　うそでしょ！　ってなりました。

パンフレット一枚では上記の情報は書ききれない！　という気持ちはわかります。A4三つ折り、さほど情報は詰め込めません。厳選しないとろくに伝わらない、グラフィックの欠点は「物理的に存在する」ことであり、これがまた正しく利点でもあります。
パンフレットに記載しておくと「情報が展開できるツール」は以下の通り。

• 電話番号
• SNS（TwitterやFacebook）
• ウェブサイト

SNSは無料で作ることができるので、手軽に情報展開ができます。「情報展開って何をすればいいの……？」となるかもしれませんが、それはもちろん、上記の「カスタマーが必要としている情報」を中心に、「カスタマーに知ってほしい情報」を展開すればいいのです。農業に対する思いとか、不安とか、情熱とか、いろいろありますよね。

ウェブサイトなんか作るお金もないし自分で作るのも無理！　という方は無料のブログを借りて書いてみてもいいのです。ショップ名検索した時になんにも引っかからないときのがっかり感は結構半端ないダメージですぞ！
こういう時に何が起こるかというと、同じマルシェに定期的に来ない場合は「マルシェに出店してもリピートしてくれるカスタマーが出てこない」ということになりうるのです。
「パンフレットに電話番号あるよ！」と言ってもパンフレットを始めとするチラシやリーフレットの欠点は「物理的に存在すること」、これはすなわち「捨てられたら終わり」ということでもあるのです。

その点ネットの情報は、一度アップロードしたら「消えない情報」になります。
……ただ、「消えない情報」ということそのものがデメリットにもなりますので、更新作業が必要になってくるのですけれど……。

ホームページを持っているなら今すぐ確認を！

デザインの視点から見たホームページの見直しポイントは以下の通り。

1.写真はきれいですか？

「プロみたいな写真を！」と言っているのではありません。ポイントは、被写体はきちんとカメラ内に収まっているか、撮影してカスタマーに伝えたいところを伝えられているか、ピントは合っているか、色飛びしたり反射したりしていないか。
「あ、おいしそう」と思わないと、カスタマーはすぐに去ってしまいます。枚数が多ければいいというわけでもありません。写真は「絵で情報を伝える」ためのものであって、情報は3～5つくらいがベストです。だから一つの情報に対し、写真は5枚が限界ということですね。

2.フォントサイズは16px以上になっていますか？

大事です。
読めるか読めないかの瀬戸際12pxを使っているHPはご注意下さい。割と読めません。

3.スマートフォン用ページ、あるいはレスポンシブになっていますか？

PCでホームページを見る人よりもスマートフォンで見る人の方が多くなってきています。高額な野菜でも、リピーターになるタイプの方はやはりモバイルで選ぶ傾向です。
最近だとモバイルファーストが推奨されているので、現状でスマホページがあるところもおいおいはレスポンシブかあるいはまた別の手段になってくるかと思われます。

インクループのブログなんでちょっと営業させてくださいね。

＞https://service.incloop.com/

普通格安ホームページ作成だと5万スタートが多いのですが、だいたいどこもそれプラス上乗せがあるものです。ホームページの箱作成がこの値段だと思ったほうがいいのではないかなぁ、と……。

特に、普通の制作会社は「クライアントからヒアリングして情報を整理、分析、まとめあげてライティングする」ということはあまりしません。「何を載せたいですか」は聞いてくれますが、「どんなふうに載せたいですか」はクライアントの方の提供になります。

ホームページを作る時に何が一番大変なのか、というと、「見た目」よりも「中身」すなわち「コンテンツ」です。
コンテンツを構成するものは「図」「イラスト」「文章」「動画」「音声」といったものですが、これらはすべて「情報」で成り立っています。
情報をよりわかりやすく、質良く、的確にしようとすると、お値段があがります。さらにこの情報を斬新にしようとすると、さらにお値段があがります。見た目や方法にこだわるとさらにさらにさらにお値段があがります。

普通に「ちゃんとお客様に伝わるホームページを作りたい」と真剣に考えた場合、5万ではとてもできないわけですね。先の話で言えば、農業のプロとWebのプロがしっかりコミュニケートして、足並みをそろえて、互いにプロの仕事をしないと、「情報の提供」はできないのです。
インクループはこのスタンスです。よ。

話がそれましたがマルシェの食材はだいたいおいしい

ただね！　値段がね！　高いんですよ！

でも贈り物にはぴったりだな、と思いまして、「あのときのあのマルシェのお店！」ってなれたらいいのにな、と思ったわけです。やはり丁寧に作られた食材というのは、それなりに値段が張ってしかるべきもの。日常使いにはできないにしても、時々思い出して買う、くらいはできたらいいのになぁ、ともそもそ思います。

マルシェで買ったまいたけと昔の味たまごさんのところのたまごで作ったオムレツ。おいしかったです。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

ブログの中にLINEやFacebookのメッセージみたいに会話風でやり取りしている文章があると変化があることから離脱率やページ滞在時間が伸びる傾向があります。

今回はそんな吹き出しを使った会話が簡単に作ることができるWordPressのプラグイン『Speech Bubble』を紹介したいと思います。

5分もあれば使えるようになる簡単なプラグインなのでぜひお試しあれ！

この投稿を読むとできるようになること

こんな風に吹き出しで会話しているような表現を作れるようになります。
※サンプルは「ポップコーンダイエットブログ」より

まずはプラグイン【Speech Bubble】をインストール

WordPressのダッシュボードにログインして「プラグイン」→「新規追加」を選択します。

プラグインの検索に Speech Bubble と入力します。

以下の画像のようにプラグインが見つかりますので、「今すぐインストール」をクリックします。

インストール中・・・。ぐるぐる・・・。

「有効化」を押せばインストール完了です。

特に設定はありませんので、インストールはこれにて完了です。

次は使い方を説明していきます。

吹き出しを出したい時はショートコードを貼り付けるだけ

コピペしてWordPressの投稿画面に貼り付けてみてください。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="テスト1号さん"] こうやってショートコードを貼り付ければいいんだね [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="テスト2号さん"] そうそう。簡単だよね！ [/speech_bubble]

貼り付けるとこんな画面で表示されます。

名前を変えてみよう！

以下のショートコードのnameのXXXXの部分を変更すると、吹き出しの名前の部分が変更できます。

メッセージを変更してみよう！

メッセージを変更する時は以下のXXXXの部分を変更するとメッセージの内容が変わります。

メッセージを変更してみますね。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="テスト1号さん"] 何かしゃべってよ！ [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="テスト2号さん"] あ、はい。[/speech_bubble]

こうなります。

左右を入れ替える方法は？

吹き出しの位置が左からと、右からのものに設定するのはsubtypeのXX部分を L1 にすると左から、 R1 にすると右から吹き出しが出てきます。

L1ばっかりにしても大丈夫です。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="テスト1号さん"] 連続左でもいいんだね [/speech_bubble]
[speech_bubble type="drop" subtype="L1" icon="2.jpg" name="テスト2号さん"] そうだよ～ [/speech_bubble]

このショートコードだと、こうなります。

画像を変更してみよう！

ちょっと難しくなりますが、吹き出しの画像をデフォルトのものから変更してみましょう。

FTPでサーバに接続して、プラグインがインストールされているディレクトリのimgの中に画像をアップロードします。

こんな感じで2つの画像をアップロードしてみました。

アップロードした画像を設定する方法は以下のiconのXXXXの部分にアップロードした画像のファイル名を書くだけです。ファイルの種類はjpg、png、gif、svg、tifが対応しているそうです。

このようにショートコードを書くと・・・

[speech_bubble type="drop" subtype="L1" icon="popco_icon.png" name="ポプコ"] ポップコーンの妖精ポプコです♪ [/speech_bubble]

こうなります。

ポプコかわいいですね！

吹き出しのデザインは全部で9種類

吹き出しの種類も実は変更ができまして、drop、std、fb、fb-flat、ln、ln-flat、pink、rtail、thinkの全部で9種類のコードがあります。

typeのXXXXの部分にコード名を書きます。

drop：デフォルト

[speech_bubble type="drop" subtype="L1" icon="konta_icon.png" name="こんた"] デフォ [/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="popco_icon.png" name="ポプコ"] シンプルでいいね [/speech_bubble]

std：スタンダード

[speech_bubble type="std" subtype="L1" icon="konta_icon.png" name="こんた"] スタンダード[/speech_bubble]
[speech_bubble type="std" subtype="R1" icon="popco_icon.png" name="ポプコ"] ミニマルな生活してみたい [/speech_bubble]

fb：フェイスブック風

[speech_bubble type="fb" subtype="L1" icon="konta_icon.png" name="こんた"] フェイスブック[/speech_bubble]
[speech_bubble type="fb" subtype="R1" icon="popco_icon.png" name="ポプコ"] いいね！ [/speech_bubble]

fb-flat：フェイスブックのフラットデザイン版

[speech_bubble type="fb-flat" subtype="L1" icon="konta_icon.png" name="こんた"] フェイスブックフラット[/speech_bubble]
[speech_bubble type="fb-flat" subtype="R1" icon="popco_icon.png" name="ポプコ"] フラットデザインって最近の流行りだよね。[/speech_bubble]

ln：LINE風

[speech_bubble type="ln" subtype="L1" icon="konta_icon.png" name="こんた"] LINE[/speech_bubble]
[speech_bubble type="ln" subtype="R1" icon="popco_icon.png" name="ポプコ"] こんたってLINE友達いるの？[/speech_bubble]

ln-flat：LINEのフラットデザイン版

[speech_bubble type="ln-flat" subtype="L1" icon="konta_icon.png" name="こんた"] LINEフラット[/speech_bubble]
[speech_bubble type="ln-flat" subtype="R1" icon="popco_icon.png" name="ポプコ"] LINE友達いるんだｗ[/speech_bubble]

pink：ピンクの吹き出し

[speech_bubble type="pink" subtype="L1" icon="konta_icon.png" name="こんた"] ピンク[/speech_bubble]
[speech_bubble type="pink" subtype="R1" icon="popco_icon.png" name="ポプコ"]かわいい～[/speech_bubble]

rtail：水色の吹き出し（rtailってなんだろう？）

[speech_bubble type="rtail" subtype="L1" icon="konta_icon.png" name="こんた"] 水色[/speech_bubble]
[speech_bubble type="rtail" subtype="R1" icon="popco_icon.png" name="ポプコ"]さわやか～[/speech_bubble]

think：心の声の吹き出し

[speech_bubble type="think" subtype="L1" icon="konta_icon.png" name="こんた"] ポプコかわいいなぁ・・[/speech_bubble]
[speech_bubble type="think" subtype="R1" icon="popco_icon.png" name="ポプコ"]いつも悪く言ってゴメンね。ホントは・・・[/speech_bubble]

Speech Bubbleを使って楽しいブログを作ろう！

今回ご紹介させていただきました【Speech Bubble】を使うと、簡単にマンガ風の会話をブログ内に作ることができてしまいます。

マンガに慣れている日本人は文章よりも、このような吹き出しになっているほうが読みやすく、頭のなかにスッと入ってきやすかったりします。

コンバージョン率の改善にも役立てられると思いますので、ぜひ効果的な使い方をしてみてください。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

「いやめっちゃ楽ですよ。レスポンシブにかかる時間ホント減りましたもん」
「へー。ええやん。それウチの標準にしようよ」

というわけで勉強会を開いたら

「できるってこたぁわかった」
「なんとなくわかったような気がする」
「つかプロパティ多くね？」

となりました。プロパティに関しては完全同意なのですが、なんとなくわかったじゃ困るんですよ！
そんなわけで必死こいてこうだよっていうテキストを作りました。ご自由にお持ちください。

編集可能なaiデータ（IllustratorCC）、pdfデータが入っています。再配布は禁止であとはご自由にどうぞー。

flexboxテキスト

1 file(s)   1.85 MB

Download

特に当社の社員は必ずDLして覚えてください。お願いします。

レスポンシブ対応に最適なflexbox

レスポンシブデザインをデフォルトで行っているインクループでは、ちょっと前までfloatを使ったレイアウトをしておりました。IEの前のバージョンでの画面確認をするお客様が多かったからですね。ちょっと不安だったのですね。

ですが2017年4月11日にIE9もIE10も延長サポートが終了しました。
つまりIE9とかIE10は、これからとっても危険なブラウザになるということです。セキュリティに問題があっても修正されなくなるブラウザで、ウェブページを見たいという方はいらっしゃらないと思います。

なのでこれを境にCSSコードもしっかり基準を作らないと！　ということになったわけです。

flexboxはfloatでclearfixだのなんだのと考えていたdivのあれこれを、考えなくてもよくなるとっても素敵なプロパティです。
端的に言ってしまえば「ハコに突っ込んだアイテムは全部自動で整理します」機能。
ドラクエとかFFでも見かける「道具を整理する」の機能です。エクセレント。ついでに自分で並び替えもできる。パーフェクトです。
モンハンのダブルクロスも随分とアイテム登録がらくちんになって……おっとこれは別の話ですな！

ホームページをレスポンシブにする利点とは？

人口の60％がスマートフォンから検索している今現在、スマートフォンやタブレットのユーザー数は増加し続けています。特に20代から40代の利用率は平均73％で、これからも伸び続けていくだろうことが予測できます。（2016年総務省「情報通信白書平成28年度版」）
ターゲットの年齢層にもよりますが、レスポンシブあるいはスマートフォン対応のウェブサイトはこれから必須になっていくことでしょう。

レスポンシブデザインのウェブサイトは、多様なモバイルデバイスで自動的に最適なデザインを構成できる仕組みです。
小さな画面でストレスフリーな閲覧ができるようになる、ということは、ユーザーエクスペリエンスに非常に重要なことです。

flexboxでできる「順番の入れ替え」

flexboxは「コンテンツの並びを整理できる」他に「その順番を入れ替えることができる」というのが非常にフレキシブルで魅力的な機能です。これをやると「パソコンだとここ、スマホだとこっち」というレイアウトの入れ替えが簡単にできるのですね。

柔軟性のある導線づくりにflexboxはこれから必須となっていくかと思われます。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

以前こんな記事を書きました。
WEBデザインをするツールとしてIllustratorとPhotoshopの違いを比較してみる

最近すっかりIllustratorでWEBデザインをするスタイルになって、そろそろこれが確立し始めているような気が！　していますので！
覚書も兼ねてオススメIllustratorのポイント11選です。相変わらずイラレラブ勢です。

IllustratorでWEBデザインを行うときの下準備

環境設定（ショートカット：Ctrl＋K/Command＋K）

• キー入力を1pxに
• 単位設定をすべてピクセルに
• データの復元はお好みで

新規ファイルの設定（ショートカット：Ctrl＋N/Command＋N）

新規ファイルを作成する場合はWeb設定を選びます。
詳細設定をクリックすると昔ながらのファイル設定が出てきます。
カラーモードはRGB、72ppiで製作すればだいたい何とかなります。プレビューモードは途中でも変更可能ですがお好みでデフォルトかピクセルを選びましょう。

ピクセルパーフェクトって何？

Illustratorはベクターですので、ピクセルよりももっと細やかな表現が可能なのですが、ディスプレイ上で表現するにピクセルよりも細かい表現などうろたえるのみになってしまいます。
ピクセルパーフェクトは、Illustrator上でもきっちりピクセルにフィックスしてくれる機能です。これで妙なズレもできない！

ちなみに新規ファイル作成の時に「Web」から作成を選ぶと、「ピクセルにスナップ」に自動的にチェックが入ります。これは「メニュー＞表示」から確認できます。
既存のものをピクセルパーフェクトにしたい場合（言い方としてはピクセル整合、とか、ピクセルにスナップ、もピクセルパーフェクトの範疇内ですね）は、対象のオブジェクトを選択したあと、右クリック＞ピクセルを最適化　を選びます。

ピクセル整合はできるオブジェクトとできないオブジェクトがありますので随時確認しながら作業しましょう。

ピクセルパーフェクトなアートの描画｜Adobeサポート

ピクセルパーフェクトが邪魔になることもある？

特に自由にイラストを描いていきたいときは、この「ピクセルにスナップ」というやつが非常に煩わしくなる時があります。私は曲線で表現していきたいときは、別ファイルに描いて、配置時に「ピクセルを最適化」しています。

線の設定

環境設定できちんと単位をピクセルに設定しておくと、線幅のスタートは1pxからになります。
線の位置を内側にしておきましょう。中央にすると0.5pxオブジェクトが大きくなっちゃいますからね！

プレビューについて

ピクセルプレビュー（ショートカット：Ctrl＋Alt＋Y/Command＋Alt＋Y　解除：Ctrl＋Shift＋Alt＋Y/Command＋Shift＋Alt＋Y）

表示＞ピクセルプレビューでピクセルが見えるようになります。拡大して確認してみましょう。

新規ファイル作成時にプレビューモードを「ピクセル」にしておくと、このピクセルプレビューがオンになった状態でファイルが生成されます。

アウトラインのプレビュー（ショートカット：Ctrl＋Y/Command＋Y　解除：Ctrl＋Y/Command＋Y）

Webデザインのみでなく、DTPなどにもよく使われますが、Illustratorにおけるパスのラインが見えるようになります。

レイヤーパネルの眼の部分をCtrlを押しながらクリックすると同様の表示になります。レイヤーごとにも可能です。

ルーラー（定規）の表示とガイドラインの作成

ルーラー（定規）の表示はショートカット：Ctrl＋R/Command＋Rで、解除も同様です。使い方はPhotoshopなどと一緒で、定規をクリック&ドラッグすると、縦線・横線のガイドラインを作成することができます。

シェイプツールなどでガイドを作成することもできます。画面の中で描画範囲を決めるときは非常に便利。ショートカット：Ctrl＋5/Command＋5。

カラーガイドによる色の置き換えとグローバルカラー

カラーガイド

イラストや図などの微細なカラー変化をしたい場合、細かいパーツをshiftを押しながら選択するのは苦痛極まりないので、カラーガイドを使います。オブジェクトを選択した状態でカラーガイドを出してみると、それぞれのカラーをどのように変えるかを選ぶことができます。
カラーガイドパレット：Shift+F3　表示＞カラーガイド

カラーグループ（カラーハーモニー）｜Adobeサポート

グローバルカラー

作成した色を多用する場合、色をグローバルカラーとして登録しておくことが可能です。汎用の、広域の色、ってことですね。

グローバルにチェックを入れておくと、スウォッチパネル上で色を変更したときに、同じ色がすべて変化します。
グローバルカラーにしてスウォッチパネルに登録するより前に同色で作っていたものは、デフォルトとして残ってしまいますので、後からいちいち色を登録したグローバルカラーで置き換えしなければならなくなりますので、先にグローバルカラーを作っておくと便利ですね。

なお、一気にグローバルカラーを適応したい場合は、グローバルカラーでないデフォルトの色を乗せたオブジェクトを選択したのち、選択＞共通＞カラー（塗りor線）を選ぶと便利です。

スウォッチの使用と作成｜Adobeサポート

段落スタイルで見出しやフォントのテンプレート化

同じく文字スタイルというのもあるのですが、段落スタイルの方が使い勝手がよいです。hで見出しを組むことが多いので、h1からh5くらいまで、あらかじめフォントサイズとフォントファミリー、カラーくらいは設定しておくと便利です。

文字スタイルと段落スタイル｜Adobeサポート

変形

しょっちゅう使います。基本的な使い方をおさらいしておきましょう。
「角を拡大・縮小」「線幅と効果を拡大縮小」にチェックを入れると、それぞれが比率を保ったまま拡大縮小します。線幅を変えたくない、とか、角の丸みはそのままで、といったときはチェックを外しておくのがベストです。

変形パネルの使い方（Illustrator CC）｜Adobeサポート

アセット

アセットあればもうスライスとかいらないんじゃないの？　なんて思っちゃいます。本当にスライスを作る機会が激減しました。
詳しくはこちら。

2016年6月20日のAdobeソフトアップデートで Illustratorに画像アセットが追加されました

アセットの収集と一括書き出し｜Adobeサポート

グラフィックスタイル

アピアランスで設定した、オブジェクトに適応するフィルターや、線や塗りの色、パターン、ブラシなどをひとまとめにして登録できます。WebデザインのみでなくDTPでもよく利用されるツールですね。

シンボル

画像やアイコン、イラストといった様々なオブジェクトの要素をひとまとめにして登録することができます。グラフィックスタイルと違って、もうすでに完成された形を登録しておくことになるので、ヘッダーやフッターをひとまとめにしてシンボル化しておくといいでしょう。
シンボルは、該当するシンボルをパレット上でダブルクリックorアートボード上のシンボルをダブルクリックで編集ができ、同じシンボルを使用している場合は変更がすべてに適応されます。

リンク

Illustratorで画像を配置したとき、画像にガイドカラーでばってんが描かれているとリンク画像です。ファイル＞配置　で出てくるダイアログで「リンク」にチェックを入れておくとこういった設定になります。
画像は「オリジナルを編集」することで、Photoshopで編集を行うことができます。リンクの更新は自動で行われますが、手動でも行うことができます。

ちなみにjpegなどの単独ファイルは、ペインタや他のソフトで開かれる場合があります。これはIllustratorのプログラムではなく、各OSで「jpegを開くソフトはPhotoshopだよ」という具合に指定してあげると、Illustratorの「オリジナルを編集」からPhotoshopに飛ぶようになります。

Illustratorでのワイヤーフレーム、およびデザインの書き出し方について

illustratorのデータはアートボードごとにpdfの書き出しが可能です。
別名で保存＞ファイルの種類：Adobe PDFにして、
「全て」をチェックする場合：すべてのアートボードを含む全画面のPDFが生成されます。
「範囲」をチェックする場合：各々アートボードごとに書き出しされます。数字をハイフンでつなぐと、数字の範囲内のアートボードを書き出し（1-5なら1、2、3、4、5のアートボード）カンマで区切ると指定されたアートボードを書き出します（2,5なら2と5のアートボード）合わせ技として1-5,8,12とすると、1から5のアートボードと、8と12のアートボードを書き出します。

長くなりましたね！皆様のよいWebデザインライフをお楽しみくださいませー！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

HPを作っていると、SNS関係や他の企業のロゴを使用することが多くあります。特にFacebook、Twitter、LINE、この辺りは日本において必須項目となってきていますね。それぞれに特徴のあるSNSですが、アイコンもかなり特徴的。もうFacebookならこの色、このロゴ、というのが、言わなくても出てくる人は多いのではないでしょうか。

そんな各々サービスのロゴを利用するときに、結構細かい規定があるのをご存知でしょうか。
たまに「そいつぁはやべぇぞ！　すぐに修正しましょうぜ！」という使い方をしている企業やお店を見かけます。
各々サービスを借りているのであればそちらの定義する利用規約、利用規定に沿って物事を扱うのはユーザーとして当然。
ちょっとロゴの利用規約についてお話ししますね。

ロゴの利用規約はロゴが示すブランドイメージを守るために存在する。

「そもそもロゴごときでそんな利用規約とか……」と思っている人、いるんじゃないでしょうか。起業して自分の会社のロゴがほしい、と思っている人でもまれにロゴは安く作れたらそれでいい、という人がいます。
ロゴは企業やサービスを象徴する概念を具体化したものの一つ、その中でも一番ユーザーの眼につくイメージです。
何言ってんだかよくわかんね、と私はこの文章を書いていて思うのですが、わかりやすくまとめると

ロゴは企業やサービスの顔にあたる

FacebookやTwitterといったときに、ぱっと「ああ、あのロゴね」とか「あのロゴマークだね」というのが出てくると思います。
これこそがまさにブランド、企業やサービスの抽象的な概念の具体化なのです。

それがどうしたって？

誰しもがわかる「あのロゴのとこね！」の影響力や頒布力こそが企業の力そのものなのです。

ロゴの利用規約や利用規定を守らないとどうなるの？

ロゴの利用規約をロゴレギュレーションといいますが、大概の大企業、公共施設やよく知られているサービスにはこういったロゴの利用規約が必ず存在します。「あれ？　このロゴどうやって使うの？」というナビゲーション的なものがないときは、バンバン企業やサービスに問い合わせましょう。「きちんと使いたい」という人を邪険に扱うようなとこはありません。
逆に「別にどうでもよくね？」と自分勝手に使った場合はその利用規定に沿って罰則がある場合が多いです。

• 対象サービスの無期限停止（SNSだった場合はSNSが使えなくなります）
• 対象サービスの商標（ロゴ）の利用無期限停止（SNSだった場合はロゴを利用することができなくなります）

だいたいこれらは必須で適応されます。

サービスを利用しようとしてアカウント停止になってしまっては元も子もありません。また、ロゴを使えなくなるというのはかなりのデメリットになるということは、上記の「企業やサービスの象徴」であるという点からご理解いただけると思います。
利用規約は守りましょう。

ロゴの利用規約で出てくる用語

アイソレーション

Isolation:分離、独立、絶縁。
ロゴやアイコンにおいて、他のロゴやアイコンと該当するアイコンを分離して表示するための「余白の設定」のことをアイソレーションと呼びます。
最低限この幅があれば使っていいよ、という表記になります。

ロゴを100％ととした場合、それに対する150％あるいは130％といった「幅を基準に考える」ものと、縦幅の1/3の高さを余白として取る、などといった「余白を基準に考えるもの」があります。

ティント加工

Twitterのロゴガイドラインに出てくる単語ですが、色合いの調整のことを示します。ロゴを配置する背景の色をコントロールしてロゴの視認性が高い状態を維持してね、という場合にこの加工をしてね、といわれる場合があります。

大概のロゴガイドラインは専門用語らしきものは見当たりません。誰にでもわかるように書かれている場合が多いので、面倒くさがらずに一度目を通しましょう。

以下、2017年3月3日現在において、WEB上における最新のロゴ利用規約となります。
記事を閲覧している未来においては利用規約が変わっている場合もありますので、最新のものを各SNSから調査するようにしてくださいませ。

Facebookのロゴ利用規約

Facebook　ブランドリソースセンター
ブランドリソースセンターの「ガイドライン」を読んだら「素材」メニューをクリックすると、ロゴやバナーが出てきます。ダウンロードしたいものをクリックすると、めちゃくちゃ丁寧なガイドラインが出てきますので、熟読の上ご利用ください。

よくある違反例

特に3つ目のFacebookブランドの一部に、自社の名称や商標、一般名称を統合したものはよく違反例を見ます。

Facebookのロゴは基本的に単独で使うことが求められています。

自社のFacebookアカウントだから、といっても、Facebookのロゴと自社のロゴやサービスのロゴを一緒にしたバナーを作成する、というのは違反となりますのでご注意ください。

Twitterのロゴ利用規約

Twitter Brand

ブランドガイドラインのPDFがあります。こちらは日本語となっております。

よくある違反例

昔のロゴを使用しているケースが多くあります。

最新のロゴを利用しましょう。

また、ロゴマークとテキストの組み合わせについても取り上げられています。

シンボルとしての利用とテキストとしての利用はしっかり分けて認識しましょう。

LINEのロゴ利用規約

LINEのロゴ利用規約について

LINEとLINE@のロゴ利用規約は別個です。やってはいけないことは具体的にイラストで表されているのでわかりにくいことはないと思います。
日本語翻訳を描けたページはコチラ。

よくある違反例

エフェクト（ドロップシャドウやべベル）をアイコンにかけることは禁止です。

LINE＠のロゴ利用規約

LINE@ロゴの利用について

日本語表記です。

よくある違反例

立体化（ドロップシャドウやべベルといったエフェクトを描けること）はよく見られますが禁止です。バナーなどに入れるときは気を付けてください。

色は白か指定の緑、黒のみ利用可能で、別の色に変更することはできません。また文章の一部に利用することも禁止です。

特に文章の一部に利用する、という点ですが、バナーでまれに見かけます。ご利用には注意してください。

見た目を守ることがブランドを維持することにつながる

余白とったり見やすくしたりしたらブランドが守れるの？　と思う方もいらっしゃるかと思いますが、実はこういうのとっても大切なんですね。イメージをきちんと保護することは企業の顔を守ることと同じです。
SNSなどのロゴを利用する際は、そういった部分をきちんと把握して利用しましょう！

2019年1月18日追記

コメントで「このブログで使っているFacebookアイコンも利用規約違反では？」とあったので、調べました。

使っているのは「Add to any」というプラグインなのですが

確かにコレはアウトですね……。

なので、SVGファイルをFacebookのガイドラインページからダウンロードしてきた正規ファイルで上書きしました！
すると

設定画面ではきちんと正規ロゴになっているというのに

こちらは画面にて変わらず……。なぜ！
キャッシュの問題かもしれませんが、クリアにしてもなかなか変化が見られなかったので、こちら一時的にFacebookアイコンを非表示にしています。

しかし、Wordpressやその他CMS、WEBフォントなどで利用されている各SNSロゴについては、どういうステップで再配布などの許可が下りているんでしょうかね？

こちら、目下調査中です！

あ、もうそろそろGoogle＋が終了しますので、こちらのアイコンも合わせて撤去しますね。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

イラストとは何か

IllustratorとPhotoshop、どっちを使った方が絵を描きやすいか、と問われると、Photoshopだと答えるデザイナーさんが日本には結構多いと思います。
ペンタブを使ってインクを落とすように直接画面に絵が描ける、という点で、Photoshopはかなり直観的に「筆を走らせる」ことができます。
それに対してIllustratorのなんとも使いにくいことよ……だいたいパスってなんじゃい。と思っている方、たぶんたくさんいるんじゃないかなぁと思っております。Illustratorって名前がついているくせにイラスト描きにくいじゃん、となっていませんか？

Adobe Illustratorはアメリカで開発されたソフトウェアです。
つまり、Illustratorというネーミングはアメリカの意味合いでつけられています。英語圏だとイラストレーションというのは「文字であらわされないほぼすべての図形」と通じるものがあり、絵本の挿絵から、建築パース、図解、取扱説明書にあるものもイラストレーションと呼べるものにあたります。

日本でいうイラストというとアニメや漫画がポーンと出てきてしまうのは、日本がサブカルチャーに非常に密接にあるからなんですね。それもそれでイラストレーションなのですが、外国ではイラストという単語そのものが「？」になることがあるらしいのでお気を付けくださいませ。
で、何が言いたいかといいますと、Illustratorで描くイラストは、見眼の美しさと同等に、わかりやすさ、伝わりやすさ、イラストレーションの近くにあるテキストをより簡単に理解してもらうということに重きを置いています。

可愛い女の子のイラストやアニメのキャラクターを描きたいと思ったときに、Illustratorではツールが違うのです。

＞IllustratorとPhotoshopの違いを比較してみる

Illustratorでイラストを描くときに押さえておくといいポイント

• 色は3段階、あるいは5段階で作成する
• 色の段階ごとにグラデーションを使う
• ハイライトとシャドウをつくる

大概のイラストはこれだけおさえておくと非常にリアリティのあるイラストになります。

色は3段階、あるいは5段階で作成する

よくいうアニメ塗り、というものになりますが、塗っているのではなく面を割っている、という感じに作成します。
ベースとなる1色を3段階、あるいは5段階ごとに明るさを分けて作成して着色すると、段階数が多くなるごとにリアリティが増します。最近では2トーンのアニメもありますが、環境光を考えることによって結構2トーンでもいい感じに仕上がります。

色の段階ごとにグラデーションを作る

グラデーションを置くときに、次の色につながるような形でグラデ―ションを作ると、なじみがよくなります。あえてつながらないようにグラデーションを作っても、影の明暗が綺麗に分かれて見眼がよくなります。

グラデーションを置いただけだとリアリティがでませんので、光源をきめて、光の当たる方から薄い色、順々に濃い色、としていくと、立体的になっていきます。が、このあたりはもうIllustratorの使い方というよりも、ものの観察能力になってきてしまいますね。

ハイライトとシャドウをつくる

物質がそこにある時には必ず光と影が生じます。いわゆる白と黒、というものになりますが、影に関しては黒、という単一の色で表現することがあまりありません。グラデーションや単色だけでも十分に表現できます。
また、物質だけでなく、シャドウを落とす、ということもできます。（ドロップシャドウ）これがよりイラストをリアルにしてくれます。

Illustratorは根気！

コツコツ頑張ればだれでも使えるようになる、それがIllustratorのいいところです。
使い方さえ覚えれば以下のようなイラストも一時間くらいで描けるようになります。

妥協しないこと、あきらめないこと、何事もそうですが、イラストを描くのも結構な時間が必要なんですね。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

新年明けましておめでとうございます。
皆様のおかげで2017年も無事に新しい年を迎えることができました！

本年もインクループ社員一同、皆様にご満足頂けるサービスを心がける所存でございますので、
何とぞ昨年同様のご愛顧を賜わりますよう、お願い申し上げます。

さて、2017年もワクワクドキドキするような、そんな予感がしてたまりません！

ホームページで集客ができていますか？

突然ですが、あなたの会社のホームページはきちんと集客ができていますか？

たかがHPでしょ？HPで集客なんてできるわけがない…
と思う方もなかにはいらっしゃるかもしれません。

会社の費用で何が一番高いのか？
ほとんどの企業は「人件費」と答えるのではないでしょうか。
人を雇うにはお金がかかりますよね。一人前になるまで時間もかかります。
（執筆者：吉見もまだまだ半人前…もっと頑張ります！！）

しかし、
ホームページは一度作ってしまえば、24時間年中無休で働いてくれる
優秀な営業マンになるということをご存じでしたか？

誰がいつ訪れても、同じレベルでアプローチでき、（当たり前ですが研修も必要ありません）
ユーザーの心を突き動かすことができ、物が売れ、お問い合わせを増やすことができます。

研修いらずで優秀、そして24時間休まずに働いてくれる営業マンって、普通いませんよね？
いたとしたら一体時給はいくらになるんでしょうか…(笑)

でも、ウェブの世界ではそれが作れるんです。
インクループは優秀な営業マンを生み出すためのお手伝いをしていますよ！

これらは、インクループにお問い合わせ頂くお客様からの悩みの一例です。

• インターネットから集客をしたい！
• 物を売りたい！
• お問い合わせを増やしたい！

そんなお客様の希望を叶えるために、インクループでお手伝いできることがあります。

ホームページを活用した事例集をご紹介します

インクループでお手伝いさせて頂いているお客様の実績をほんの一部だけご紹介させて頂きます。

【ケイライフ】様

（以下の画像は改善前のHPです）

前年度比較…※2015年と2016年の比較です。
・ユーザー数約50％増加
・PV数約51％増加
・滞在時間約48％増加
・来店予約数391％増加

≫ケイライフ様ホームページへ

【昔の味たまご】様

（以下の画像は改善前のHP）

前年度比較…※2015年と2016年の比較です。
・ユーザー数約792％増加
・PV数約423％増加
・滞在時間約15％増加
・ECショップ売り上げ40％増加（前年度の12月の売り上げ比較）

≫昔の味たまご様ホームページへ

インクループのお年玉キャンペーンをご紹介いたします！

インクループでは2017年新年のお年玉キャンペーンをご提案させて頂きました。

「売れない」「お問い合わせがこない」のは、
なにかしらの原因があり、なにかしらの改善点があるはずです。

• どうしたら売れるのか？
• どうしたらお問い合わせが増えるのか？

これらの課題に向けて、お客様のHPをインクループは徹底的に調査し、改善に導き出します。

HP改善レポートでアクセス・お問い合わせアップ！

インクループはこれまで、多業種にわたる様々な業界において、
お客様の会社の売り上げアップ、お問い合わせ数増加などのお手伝いをさせて頂きました。

これらの経験を活かし、年代別、業種別、商品別において、よりよいアプローチの仕方や
売れるための導線づくりを研究分析し、集積したデータをもとに
さらなる一手を生み出しながら、結果を出すことができました。

これらのデータは一つも無駄ではなく、さらに良い企画や計画をご提案することができ、
HPの集客に悩むお客様にとって、現状を正確に把握し、結果を生み出すHPに導き出すことができると思います。

HP改善レポートは先着順とさせて頂きます

「必ず結果を出す」この課題がある以上、結果を生み出せるHPへと導き出すことが第一前提になります。

通常10万円でHP改善レポートを作成させて頂いております。…が、
お年玉キャンペーン企画ということで、今までにないキャンペーンになります！

大変申し訳ありませんが、作成できるレポート数には限りがございますので、
お年玉キャンペーン企画でのお申込みは3枠までとさせて頂きます。
先着順とさせて頂きますので、お申込み数に達し次第終了とさせて頂きます。

諸注意
※お年玉キャンペーンは2017年1月中のお申込みに限ります。
※お年玉キャンペーンはお申込み数に達した時点で予告なく終了させて頂く場合がございます。
※ホームページ改善レポートの反映には別途料金が発生致します。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

NTTPCコミュニケーションズさんが提供しているのレンタルサーバーサービスの「WebARENA」を利用しているお客様からマルチドメインでWordPressをインストールして運用したいというご依頼がありました。

お安い御用ですよ～！ということで引き受けたのですが、ちょっとばかり苦戦したので備忘録＆誰かのお役に立つかもしれないということで記録に残しておきたいと思います。

WebARENAでマルチドメインを使用する時のディレクトリ構成

WebARENAの環境におけるWWWのルートディレクトリはhomeです。マルチドメイン環境にする場合は「マルチドメイン設定ツール」を使って.htaccessを生成することで、homeにアクセスしてきたセッションを.htaccessで指定したディレクトリにリダイレクトすることでマルチドメインを実現しています。

例えば、マルチドメインとして2つのドメイン（parent.comとchild.com）を設定する場合、それぞれのドメインにおいて、一方のparent.comを親ドメイン、child.comを子ドメインと定義することになります。

親ドメイン：parent.com
子ドメイン：child.com

このようにドメインを設定している場合、homeディレクトリ以下は次のように構成しておく必要があります。

home 
┗ child.com

このようなディレクトリ構成としておくことで、それぞれのドメインにアクセスした時の参照先は以下のようになります。

parent.com → home以下を参照
child.com → home/child.com以下を参照

親ドメインと子ドメインにWordPressをインストールしてみたら子ドメインのWPで404エラーが！

このように一見簡単に思えたWebARENA環境でのマルチドメイン運用ですが、親ドメインと子ドメインのどちらにもWordPressをインストールして動作確認をしていたところ、子ドメインで404エラーが発生することが分かりました。（以下はインクループのWEBサイトの404の例）

どうやらパーマリンク設定でデフォルト（http://child.com/?p=1234みたいなやつ）にしていれば問題ないのですが、ディレクトリ階層が存在するようなパーマリンク（http://child.com/blog/2016/11/1234）を設定すると、「404 Not Found」になってしまうという現象発生しているようです。

ちなみに現状のディレクトリ構成はこんな感じです。

home
┣ wp ← 親ドメイン parent.com用のWordPress
┃ ┣ wp-admin
┃ ┣ wp-content
┃ ┗ wp-includes
┗ child.com
　 ┗ wp ←子ドメイン child.com用のWordPress
　　  ┣ wp-admin
　　  ┣ wp-content
　　  ┗ wp-includes

プレーンのHTMLファイルで構成されたWEBサイトなら問題ないので、WordPressの.htaccessでmod_rewiteを使っているので、そのあたりなんだろうなぁ・・と予想。

マルチドメイン設定ツールで生成した.htaccessについて

というわけで、.htaccessを修正すれば直るはず！ということでまずはWebARENAのマルチドメイン設定ツールで作った.htaccessから見ていきます。

AddHandler application/x-httpd-php53 .php

# Enable RewriteEngine.
RewriteEngine On

# 404 Error for Multidomain Directories.
RewriteCond %{HTTP_HOST} ^parent.com$
RewriteCond %{REQUEST_URI} ^/(child.com)/
RewriteRule ^(.*)$ /$1 [L,R=404]

# Main RewriteRule for multidomain.
RewriteCond %{HTTP_HOST} ^(child.com)
RewriteCond %{REQUEST_URI} !^/(child.com)/
RewriteRule ^(.*)$ /%{HTTP_HOST}/$1/ [L]

まず最初の404 Error for Multidomain Directoriesとコメントが入っているほうですが、これは簡単に言うと、home以下にchild.comというフォルダがあるので、parent.com/child.comというURLでアクセスできてしまうのを禁止するために、もしこのURLでアクセスしてきた時には404とするための記述です。

次にMain RewriteRule for multidomainのコメントのほうですが、HTTP_HOSTがchild.comの時には、入力されたURLでアクセスしていいよ～という感じです。

一見、これで大丈夫じゃ？って思ってしまいますが、親ドメインにも子ドメインにもWordPressをインストールしている場合、先にも述べたようにディレクトリ階層があるようなパーマリンクに設定すると404になってしまい固定ページや投稿を見ることができません。

2つのWordPressをインストールしている場合の.htaccessの記述

いろいろ試して辿り着いた結果、以下のように.htaccessを書けば、WebARENAのマルチドメイン環境で親ドメイン、子ドメインの両方にWordPressをインストールしている場合でも正常にパーマリンクが作動します！

AddHandler application/x-httpd-php53 .php

# Enable RewriteEngine.
RewriteEngine On

# 404 Error for Multidomain Directories.
RewriteCond %{HTTP_HOST} ^parent.com$
RewriteCond %{REQUEST_URI} ^/(child.com)/
RewriteRule ^(.*)$ /$1 [L,R=404]

# Main RewriteRule for multidomain.
RewriteCond %{HTTP_HOST} ^(child.com)
RewriteCond %{REQUEST_URI} !^/(child.com)/
RewriteRule ^(.*)$ /%{HTTP_HOST}/$1/index.php [L]

なんと、マルチドメイン設定ツールで生成した.htaccessの一番最後にindex.phpを追加しただけ！で解決できました。

このindex.phpを追加した.htaccessはhome直下に置きます。

home （※index.phpを追加した.htaccessを設置）
┣ wp ← 親ドメイン parent.com用のWordPress、WordPressの.htaccessを設置
┃ ┣ wp-admin
┃ ┣ wp-content
┃ ┗ wp-includes
┗ child.com
　 ┗ wp ←子ドメイン child.com用のWordPress、WordPressの.htaccessを設置
　　  ┣ wp-admin
　　  ┣ wp-content
　　  ┗ wp-includes

WebARENAでマルチドメイン＆WordPressで運用する場合は注意

今回は親ドメインも子ドメインのどちらにもWordPressをインストールしたので苦戦してしまいました。

結果的にはできているのですが、マルチドメイン運用でどのドメインでもWordPressで運用するというのが一般的に行われている現状において、WebARENAのこの設定のしづらさはちょっと厳しいものがあると思います。正直、初心者にはお薦めできません。

マルチドメインでWordPressを運用するなら、さくらインターネットであればドメインのパスを設定するだけですし、エックスサーバであればドメインの追加設定をするだけで簡単にできてしまいます。.haccessの編集する必要はありません。

個人的にはエックスサーバの管理画面が分かりやすいので好きです。

WebARENAでマルチドメイン＆WordPressで運用する場合はご注意を！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。