スマホ広告サイズ_バナー

スマートフォンバナー


ネットワーク系バナー

★モバイル_バナー(横×縦)

 ・320× 50 ADNW
 ・640×100 ADNW【高解像度版】

 ・320×100 ADNW
 ・640×200 ADNW【高解像度版】

★レクタングルバナー(横×縦)

 ・300×250 ADNW
 ・600×500 ADNW【高解像度版】


インフィード形式(横×縦)

 ・ 300×300 ①_スクエア型
 ・1200×628 ②_バナー型

※掲載場所によりサイズに差異があります


スマホバナーサイズのメモの意味合いで現在出稿があるモバイル向け広告を中心にサイズ表を下記に作成しました。※2018.3.5時点のデータ

モバイル端末も「ケータイ電話」と呼ばれていたフィーチャーフォンから、スマートフォンへ移行しました。

そして、モバイル広告サイズも解像度が増えて「ドット打ち」と呼ばれる技法が有効な抽象的領域を越え、構成も通常の印刷広告のような余白のデザインが可能となりました。

参考で、かつてマス広告として絶大な広告効果を出していた、ケータイ電話モバイル広告時代の代表的な広告サイズと事例を紹介します。


フィーチャーフォンバナー

192×53 QVGA端末向け_バナー

フィーチャーフォン向けのデフォルトバナーサイズ。使用する「レスポンスフォーマット」(「CLICK!」文字入りの黒枠部分)の
カタチとサイズが決められている。2018年の現在でも運用されている代表的なバナーサイズ


384×106 VGA端末向け_バナー

「デフォルトバナー」×2倍サイズ。フィーチャーフォン向けのVGA端末向けに特化して一時的に運用されていたバナーサイズ。SB枠で使用されてましたが運用コスト減の影響からか現在は運用されていません。


192×53 QVGA端末向け_アニメGIFバナー

「デフォルトバナー」に「GIFアニメ」を使うことで複数コマの差し替えアニメーションを再現できました。コントラストに違いの大きい2つのバナーを交互に表示させるだけでも利用者の目線をバナーに向かわせることが出来、静止画バナーと比較して広告効果を大きく改善できました。


192×53 Flashバナー

「デフォルトバナー」と縦横サイズやレスポンスフォーマットは同じですが、当時のリッチ仕様としてFlashで掲載が可能でした。「5kバイト」という少ないバナー容量制限のなかで、アニメGIFバナーでは再現できない(容量が約4~10倍まで増大)細かいアニメーションが表現できる唯一の手段として、モバイル広告の表現に多大な力を与えました。

無料動画バナー:FP時代の広告面にあふれた無料訴求のバナーを一部紹介↓

※記事用にFlash形式を動画バナー(アニメGIF)に書き出ししています


最後に

以上、一部のプラットフォームとサイズについて紹介しましたが、状況に応じて修正と追加します。
スマートフォン向けのクリエイティブは情報量が多いので迷いと迷走に陥りやすいと感じますが、
明確なルールを設定して必然的で効率的な作業を続けていきます。

それでは次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

イラレの初心者向け基礎ポイントを押さえながら簡単なペーパークラフトを作ってみた

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

Illustrator(以下:イラレ)にあまり馴染みのない方からするとイラレはポスターなどの平面で完了するデータを扱うイメージを持つ方が多いのではないでしょうか。
今回はそんなイラレの初心者向け基礎ポイントを押さえながら簡単なペーパークラフトを作ってみたいと思います。
季節は桃の節句なのでテーマは「お雛様クラフト」にします!

最終的に出来上がったペーパークラフトは一番最後にありますので良かったら作ってみてくださいね!
★ペーパークラフトが苦手な人にも小さい子でもできるように簡単版の付録もあります♪

※実際にペーパークラフトを組み立てるには、はさみやカッターを使用しますので、小さな子が作る場合は大人の方が切り取ってあげてくださいね!簡易版の編集は割愛させていただきます。

初心者向けイラレ基礎×ペーパークラフト

—————————————————————–
★作成環境:IllustratorCC2018(以前のものでも可)
★動作確認:Windows10
※所要時間:調整含め一日以上
—————————————————————–

題材のお雛様ですがこちらのイラストを使用します。

【1】全体像を最初に決めます

完成サイズは両手に乗る大きさにしたいのと、印刷する際、家庭用プリンタも考慮し馴染みが多いA4サイズのアートボードで作成。
今回の両手サイズのペーパークラフトですと新規アートボードは多めに予め5つ程用意しておきます。(大きさのイメージはA4コピー用紙5枚の領域)

作成で5つ開きます。複数ページやアートワークが多い場合は1つのアートボードで作成してしまうと印刷時や保存などの管理が大変になってしまいますので今回のように、A4に収まらないとわかっている場合は予め複数のアートボードを用意してしまいましょう!
(後の増減も可能です。)
※アートボードも使いすぎればその分データ量が増えてしまうので適度に使うと良いですね。

【2】キャラの簡略化

用意していた使いたいキャラがパスで描かれた丸みのあるイラストなので、このままクラフトにするには難易度が非常に高いため(私もどうしていいかわからないため)小難しい事はなしにシンプルに組み立てられるようキャラを簡略化させました。
枠線が無い方が綺麗だったので枠線も外しています。
頭の飾りは後で糊づけで対応。

丸みがあると側面を作る際に難しくなってしまうためすべて直線になるよう部分調整をしていきます。
イラレ上でペンツールを使って大まかに型どっていくと簡単です。
今回は曲線を使わないため「ペンツール」をカチカチとクリック、一部線を直したい場合はダイレクトツールでアンカーポイントを選んで動かす!これだけで出来ます。

※元の形を完璧に維持しようと線(アンカーポイント数)を増やすと側面が作り辛くなってしまうのでなるべく簡単にする事をおすすめします。
また、対象物が線対称のものは半分だけ作って反転させてもう片方にもっていくと綺麗に描けます!

猫の顔の部分を「リフレクト」を使って作ってみます。

①まずはイラストの半分~超えるくらいまでペンツールで線を描きます。
②その時、始点と終点がちゃんと合わさるようにします。

③描いた図形を反転させます。

【3】組み立てるための側面とのりしろを作ります

今回、立体部分は無難に厚みさえ持たせられればなと思っていましたのでシンプルに「厚み40px」のみ付けました。

線(アンカーポイント)が切り替わるごとに厚み40pxを付けていきます。メインの猫にくっつけていくイメージですね。
この、のりしろ部分は感覚で角度をつけて→メインの猫にくっつけています…が、対象物が線対称なのでここでも半分だけ作って「リフレクト」で反転させて持っていくと綺麗にできます。

因みに厚み部分の柄はこの段階でつけておくと楽です。
この組み立て部分を作っているときは頭で想像しながら自分との闘いでした…!

厚み部分を取り付け終わったら、のりしろ部分がダブらないよう注意しながら付けていきます。
また、折り要素が必要なところには軽く点線を入れておくと良いです!

このような作業をすべてのパーツに行いました!
ひな壇などの箱物はサイコロを作る感覚で作成しています。

最終的なアートボードはこのようになっています。
アートボード内に収まっている部分は、そのまま印刷したり、書き出し出来ますのでとても便利です。
また、今回3つのアートボードだけで収まってしまたので余分な2つのアートボードは削しても問題ございません。

イラレの基礎的な機能だけを使って最終的に以下のようなペーパークラフトが出来上がりました!
良ければプリントして作ってみてくださいね!印刷はA4(以上)を推奨します。

—————————————————————–
★用意するもの
印刷したクラフト用紙(A4推奨)、はさみ、カッター、のり
—————————————————————–

ペーパークラフト

細かい作業が好き、ある程度の立体物に仕上げたい方はこちらがおすすめです!

▼以下3枚

ペーパークラフト(簡易版)

ペーパークラフトが苦手な人・時間のない人・小さい子へ(ひな壇の組み立て、猫を二折りで出来ます♪)

▼以下2枚

 

最後に

イラレの基礎的なツールだけでもペーパークラフトが作れました!
つめれば様々なものを生み出せそうな気がします。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。またお会いしましょう!

【身の回りのUI】テレビリモコンのUIって…

あなたのご自宅のテレビリモコンは使いやすいですか?

先日、某大手通販サイトに日本の某メーカーのテレビがサイバーマンデーと称し、3万5千円で販売されていたため購入ボタンを連打。

その後テレビが届いたので開封。ねじを数本回し組み立て完了!
外部機器を接続したためリモコンを手にして「入力切替ボタン」を押し……。

……。

……見つからない。

入力切替ボタンが見つからない…。
「絶対あるはずだ」と、入力切替ボタンを必至に探している時に思いました。

「無駄なボタン多い…」

私はテレビを普段使用しないのでこんなこと言うのもあれですが…(三ヶ月に一回見るか見ないか)
皆さんはテレビの機能って使っていますか?使いこなしていますか?

2画面、○○リンク、インフォメーション、電子取説、時刻表示、メニュー、サブメニュー、オプション、アプリ、節電切り替え、ヘルプ、他メーカー独自機能…

何に使うのだろうかというボタンばかりです。
文字で説明されても分からないボタンは使う気になりません。
使ったとしても、利用頻度はどうでしょうか?

昔はリモコンや本体のボタンからしか機能を引き出す導線がありませんでした、ですが現在は違います。昔のテレビと違い“テレビ内にホーム(またはメニュー)”画面を組み込むことができます。ホーム画面に入れれば済むような機能もあるはずなのに、ほとんどのリモコンは機能を全部のせしたような状態です。

テレビの使い方は人それぞれです。私は使わないから周りも使わないというわけでもありません。
当然、全てのボタンを使いこなすTVのスペシャリストも存在するはずです。

ですが、UIデザインの考え方でみるならば、ほとんどのリモコンのボタン数は適切ではないと感じました。

そんなこともあり。

リモコンにはまだ改善の余地があるのではないか!?
ブログのネタになるではないか!!

と思ったため、今回はリモコンのUI(主にボタン数)について、なぜ使いにくいのか?という事と、じゃあどうすれば良いのかという事についてまとめました。

1.リモコンのボタン数

各メーカーから出ているリモコンのボタン数を調べました。
※今回はテレビによく付属してくる「テレビ+録画機能」操作用リモコンでボタン数を調べています
※ボタンの配置は実際のものより若干変更しています

数字ボタン・音量・選局キーを除いたとしても46ボタン前後。ユーザーはこの中から目当てのボタンを探す事になります。この状態だと 使用に慣れても、手元を良く見てから押す必要があります。
ただ、スマートフォンのアプリケーションとは違い「使いにくいから削除」とはいかないので、使いにくくてもユーザーの方から我慢して学んでもらうことができます。しかし、ユーザーを迷わせる、直感的ではないという状態はUIとしては良くないので、どのリモコンもボタン数に関して改良が必要です。

 

 

ボタン数63形

ボタン数が多いため購入時は特にボタンの位置に迷うかもしれません。
テレビを購入したばかりのユーザーにいきなりストレスを与え、「難しい」という先入観を植え付ける可能性があります。また、利用の度に手元をしっかりと確認する必要も出てきます。お年寄りの方ならなおさらです。
様々な機能を知ってもらいたい、使ってもらいたい、という思いがあるのかも知れませんが、優先度が曖昧で、返ってどの機能も目立たなくなっています。
外見のデザインにも制限が多く掛かるため、お洒落、可愛い、など“所有することへの喜び”という体験を与える事は難しくなります。
機能的、見た目的にも……家庭向きなのでしょうか?と思ってしまいます。
まるで業務用デザイン…大型のロボットを動かせそうです!
これぞ日本メーカーといったデザインで、詰め込み&足し算デザインの典型といった感じです。デザイナーの意見は一切通らなかったのかもしれません…。

 

 

ボタン数53形

ボタン数を比較的抑えることができているリモコン。今回調査したリモコンの中だと一番ボタン数が少ないです。ユーザーは53ボタンの中から1ボタンを探すということを考えるとボタン数は少ないとは言えませんが、ボタンをしっかりカテゴリ分けするなどの見つけるためのきっかけを用意することができれば探すストレスは軽減できます。このボタン数だとボタンの配置が重要になります。
ボタン数から、機能を削りきれなかったが厳選した事が伺えます。デザイナー側のシンプルにしたいという思惑と、システム側の機能を使ってもらいたいという思惑がぶつかったようなデザインです。

2.ボタン数が多い事のメリットとデメリット

メリット
・多くの機能にアクセスしやすくなる
・多くの便利機能を知る事ができる
・機能が多いという安心感と充実感がある

デメリット
・目的のボタンを見つけにくい
・情報過多でボタンの優先度がわかりにくいため直感的な操作ができない
・スペースの都合上ボタンが小さくなる(押し間違えてしまう)
・リモコン本体サイズが大きくなる
・手元を見ないと操作が難しい
・デザイン面での自由度が低くなる(所有する喜びという体験が無くなる)

多少デメリットの方を盛った感がありますが…デメリットの事を考えるとやはりボタン数は改善すべきだと思います。

どのリモコンにも無駄だと思えるボタンが多く、使いやすくするためのシンプルさはありません。無駄だと思えるボタンと表現しましたが、正確には無駄なボタンではありません。押すとたいして需要のないであろう、差別化を図るためにメーカーが一生懸命考えた決定打にならない機能が起動するボタンです。

テレビは当然の事ながら映された映像を見るための道具です。それを踏まえると重要な機能は「番組視聴」「録画」「録画番組視聴」という答えに自然にたどり着きます。いくつかのリモコンはそんな利用頻度の高いボタンが、優先度の低いボタンに紛れていました。

使う人によっては、リモコンを使用した時点で「最近のテレビは使いにくい」「多機能すぎて難しいのでは?」「めんどくさそう」と思ってしまうかもしれません。

「そんなのどの製品でも最初はボタンの位置は迷うだろ!」

と思った方もいらっしゃるかと思いますが、ボタンが見つけにくいという問題を解消する方法はあります。
それは、不要な要素を削る、つまりはシンプルにするということです!

3.削ったボタンはどこへ?

ボタンは削る事はわかった。でも、削ったボタン(機能)はどうするのか?という意見もあると思いますが、
こちらに関しても解決策がございます!
それは…

テレビ内のホーム(メニュー)画面内に入れる!(テレビ内のホームのUIがしっかりしていればボタンに入れる必要がない)

です。
テレビ内のホーム(メニュー)画面にリモコンから削った機能を組み込めばいいだけです。
ただ、そのためには“ホームのUIも洗練されている”必要があります。
私が購入したテレビはテレビ内のホームもいまいちでした。テレビのUIに関してはまた別の機会に紹介いたします。

4.考えてみた

この機能もあの機能も使わないから取って…
この機能はメニューからアクセスできれば問題ないし…

ということで今回、私なりにリモコンのボタン数について考えてみました。
※テレビ購入時に付属する(テレビ+録画機能)操作用リモコンを想定しています

それがこちらです!

気になるボタン数は…40ボタン

テレビを見る、録画する、録画した番組を見るという、テレビを使用する上で重要な機能を中心にボタンを選定しました。お年寄りの方向けの究極にシンプルなリモコンレベルには削っていません(すでに多数存在するため)。

日本語で補足を加えるとこのようになります。

テレビを買って箱から出す、リモコンを手にとり自然に電源ボタンを押す、消音も入力切替も楽に見つかる。シンプルにする事でユーザーにとっての障害(探す・迷う)を減らすようにしました。

5.最後に

皆さんも自宅に帰ったら、リモコンを確認してみてください、きっと使っていない謎のボタンがあるはずです。そんなボタンが見つかったら、もったいないので是非使ってみてください!きっとマニュアルが必要となります。そして途中で面倒になり使用をあきらめるはずです。
テレビの差別化を図るために無理やり小技程度の新機能を付けるよりかは、シンプルなUIで上質な体験をどのようにして与えるか?ということに時間を割くべきだと思います。

ボタンを削るだけでは使用感に関して解決とまではいきません、テレビのOSとの連携をいかにスムーズにするのかがとても重要で、ユーザーに「ホームに行けばとりあえず機能が見つかる」と思ってもらえるUIにしておく必要があります。そうすればリモコンからボタンを削っても利用してもらうことが可能です。

(はら)

制約の少ない今だから意識が必要なスマホ向け抽象的デザイン

モバイル向け画像を製作する作業は、
画面解像度の低い携帯電話向けに作っていた時代から、高解像度のスマートフォン向けにシフトしており、非常に多くの情報を扱う必要があります。

240pixel → 320pixel → 640pixel → フルHD/2K → 4K

結果、
レイアウトや素材を製作する場合の情報選択肢/余地が増え、判断に時間がかかり、細部まで作りこみが出来てしまう為、終わりが見えなくなる作業を生む可能性が高まり、
また、高まった表現力は「具体性」「趣向」の判断を生む状況にも及んできております。

…今回はそんな予期せぬセグメントを避ける抽象的な表現情報量との適切な向き合い方を考えてみました。


制約の中での可能性

日本人は制約を受けた状況下での、アイデアと効率化を得意としているといわれています。
理由として、限られた島国国土の中で生活をしてきた影響もあるのでしょうか。

1980、90年代の量産性に長けたアニメフォーマットの確率や、家庭用ゲーム機ハードとソフト面での成功、
そして、携帯電話とハード/ソフトの開発においても世界の指標たる結果を残してきた状況は、
いずれも、「黎明期から成長期へ向かう中でのテクノロジーが後追いする制限下」であったといえます。

しかし、
逆の視点から見てみると、
日本人は可能性溢れる選択肢状況下では目的を見失い、
多彩な表現力の状況下でも方向性を見失いがちな思考を持っているとも考えられます。

話を「表現」「UI」に絞ってみると、
日本人は、シンプルで捉えやすいUIに長けている可能性が考えられるのではないでしょうか(強引ですが)。


シンプルで捉えやすい表現とは?

わかりやすさの条件は「単純構造」で「敷居が低い」でしょうか。

グラフィックデザインでは標識やマークなど「アイコン化」されたものがその代表ですが、
そのわかりやすさを追求して結果が、私たちが良く見るシンプルなデザインになっています。

いずれのマークも初見の記憶がないくらい一般的に生活に浸透しており、
作りこんだ表現にする必要がないことを理解いただけるのではないでしょうか。


セグメントしない表現とは?

人を選ばない(セグメントしない)表現とは、狭義ではなく広義で抽象的であることです。
作りこみ、具体的にすることが目的である以外はシンプルな表現で進めることのメリットが多いのではないでしょうか。
例えば、

・運用性/更新性の向上
・容量削減
・表示速度改善

でしょうか。

ピンク色の画像は描き込みが多く具体的で、見る人にカテゴリ(犬/車)を越えて詳細(犬種/車種)まで想像させています。


まとめ

情報設計に「更新」は付き物です。
運用パフォーマンスを考えた場合、
グラフィックデザインはトータルコストを抑えられる素材を選ぶ必然があり、
アーティスティックなグラフィックであれば、
芸術品として「想い」を込める必要があります。

限界の作りこみが価値に大きな影響を与えるコンテンツはありますので、
都度案件の「目的と訴求対象」を意識して、
抽象的で適切な情報設計を運用してみるメリットは十分あるのではないでしょうか。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

マスコットキャラクターの作り方

こんにちは!
今回のテーマは「マスコットキャラクターの作り方」です。
マスコットキャラクターを作る時の考え方や制作方法などをまとめてみました。

前置きはいいから早く作り方を知りたい!と言う方はコチラ からご覧ください!


マスコットキャラクターとは

マスコットキャラクターとは何かというと、『身辺に置いて大切にする人形や、何らか団体(グループ)のシンボルとする動物などである。(マスコット-Wikipedia)』です
アプリやWEBサービスを利用する際、ゆるっとした可愛らしいキャラクターを見かけたことはありませんか?
あの子たちを、マスコットキャラクターと呼びます。
WEBに限らず、都道府県や市町村がたくさん作っている「ゆるキャラ」などもそうですね。

マスコットキャラクターを起用するメリットは、「サービス認知」です。
サービスがどのような物なのか直感的に伝えられるので、効率の良い宣伝効果があります。
テキスト情報だけの場合より瞬時に認識しやすく覚えやすくなります。何かを説明する際、文字だけで説明されるより、イラストがあるとわかりやすいですよね。

また、キャラクター自体を気に入ってもらえれば、それがサービス利用のきっかけになる場合もあります。
ゲームや漫画系のキャラ物サービスはもちろん、公共機関など真面目で堅い印象のあるサービスでも見かける事は多いかと思います。
お堅そう、難しそうと言う印象を持ってしまいがちなサービスでも、マスコットキャラクターがいることで親しみを感じてもらい、サービス利用の敷居を低く出来る効果もあります。

マスコットキャラクターについての前置きはこのくらいにして、実際に作ってみましょう!


01.サービスコンセプトを確認する

まず初めにサービスコンセプトを確認しましょう。
自分1人で考える場合でも、企画側から依頼される場合でも、コンセプトとイメージが明確になっていることが大切です。

企画側から依頼を受ける際、コンセプトやイメージがハッキリ決まっている場合は、それに合わせて提案を行って行きます。
その一方で、コンセプトは決まっていても、具体的なイメージまで決まっていないと言う場合もあるかと思います。
「可愛い感じのイメージです。」と言う抽象的な情報だけで進めるのは危険です。可愛いと一口に言っても人によって価値観は違いますし、テイストも沢山ありますよね。
企画側とデザイン側で共通のイメージが出来ていないと、いくらデザインを提案しても「イメージと違う…」となってしまい、修正や作り直しが多発するので非効率的です。
そういう時は、もっと具体的な情報を企画側に確認して下さい。
ネット検索でイメージに近い物を探すなどして、プロジェクトメンバーみんなで共有できると認識の相違が軽減できます。


02.アイディアを考える

どんなマスコットキャラクターにするか、アイディアを考えます。
いきなりラフを描いても良いのですが、テキストで箇条書きするのも良いですよ。

アイディアを考える時のポイントは、常にサービスのコンセプトやイメージを意識する事です。
これを行う事で、自然と整合性の取れたキャラクターを作ることが出来ます。

例えば、スポーツ関連のアプリのマスコットキャラクターであれば、スポーツと言う特徴から「スポーツの種類に合わせて、色々なポーズが出来ると汎用性がある」と考えられます。
この事から「手足が長い方がポーズを付けやすいな」「等身は低すぎない方がいいな」など連想する事で、デザインの方向性を決める事が出来ます。

モチーフの選択、ビジュアルやデフォルメのバランスなど、デザインを考える上でも作りやすくなります。
キャラクターありきになって迷走したり、悩んで手が止まってしまった時は、改めてコンセプトを見直してみて下さい。


03.ラフを描く

それでは実際にラフを描いていきます。
今回は例として、「求人アプリのマスコットキャラクター」を作っていきたいと思います。
あくまで一例ですので、状況によって工数など様々かと思いますので、考え方の参考にご覧ください。

企画側から下記のようなコンセプトやイメージを貰いました。

上記を元に、まずはデザインの方向性を決めます。
貰った情報から、「仕事が見つかる=目が良い、探すのが得意」「堅実=真面目、やる気、働き者」「ゆるさ」「特徴的なロゴを活かそう」と言うデザインの方向性を決めました。
そこから思いつくアイディアを沢山描いていきます。今回はポーズ違いなども含めて、約90個ほどのラフを描きました。

約90個の案の中からいくつか候補をまとめて企画側にプレゼンした所、最終候補として2つ残りました。
フクロウと蜂です。どちらのキャラクターも、先ほど決めたデザインの方向性を取り入れたデザインにしています。

候補が2つまで絞れたら、更にラフを描きます。
デザインの修正や、ポーズのパターンなどを増やしていきます。
企画側から「もっとこうして欲しい」など指示がある場合も多いかと思いますので、その要素も取り入れつつデザインを行います。

今回は「フクロウは、バイトをしている姿などのポーズ違いが見たい」「蜂は、手足の関節が生々しいのでもっとデフォルメして欲しい」と言う指示があったので、そのようにラフを描きました。

このように何度かラフを描いたり直したりして、最終的に「フクロウ」のアイディアが採用されました。


04.描き起こす

IllustratorやPhotoshopなどのソフトを使い、ラフを描き起こします。今回はIllustratorを使いました。

描き起こす段階でキャラクターのテイストを詰めていきましょう。
ラフの段階でテイストを確認してもいいのですが、その際はあくまで方向性レベルに留めて下さい。
ラフの段階でガチガチに決めても、いざ描き起こした後で「思っていたのと違う…」となる場合があるからです。
ガチガチに決めたばかりに修正がしづらかったり、最悪1から作り直しになる可能性もあります。

テイストを変えつつ、描き起こした物が下記になります。

アウトラインの正確さや左右のバランスを変えることで「ゆるさ」の強弱を付けることが出来ます。
また同じラフから描き起こした物でも、アウトラインの線の有無で異なる雰囲気にすることが出来ます。
線がハッキリしていると、見やすく力強い印象にすることが出来ます。シチュエーションや媒体を問わない汎用性の高い表現方法です。
線を薄くしたり、なくした場合は、ナチュラルで優しい印象にすることが出来ます。ナチュラル系のサービスはもちろん、難しい・怖い印象を払拭したいサービスで運用するのも有効な表現方法です。

企画側に都度確認しながら調整を行い、最終的に下記のテイストに決まりました。
決まったテイストを元に、パターンも描き起こします。

これで、マスコットキャラクターの作成は完了です!


おわりに

いかがでしたでしょうか?
難しく考えず、まずはアイディアを出すことから始めてみて下さい。
ぜひ、サービスにピッタリなマスコットキャラクターを作って下さいね!

それではまた!デジマースのコンでした。

初心者向け!エンドロールの作り方②[After Effects編]

こんにちは!
今回のテーマは「初心者向け!エンドロールの作り方②」です。
結婚式の披露宴などで流すエンドロールムービーの作り方をご紹介します!

前回のIllustrator編の続きとなっています。
Illustratorで文字が組めたら、After Effectsで文字が上へ流れていく動きを付けてみましょう!


使用するソフト

今回は1種類のソフトを使用して動画を作ります。

————————————

■After Effects(アフターエフェクト)

————————————

バージョンは「CC 2017」を使用しています。


作成の全体の流れ

作成の全体の流れは大きく分けて3つです。

①作るべき動画のサイズと素材を確認。
②Illustratorでテキスト作成・文章の構成確認。
③After Effectsでテキストが上にスクロールする動きを付けます。

今回は③についてお話していきたいと思います。


エンドロールを動かそう!

1.After Effectsで新規コンポジションを作成

After Effectsを立ち上げ、「ファイル」→「新規コンポジション」を選択。

サイズはIllustrator編に合わせ、「幅」は640px、「高さ」は360pxと入れました。
「デュレ―ション」は動画の再生時間の長さを決められます。
エンドロールの長さによって必要な時間がそれぞれ違うかと思います。後で変更できますので、だいたいの時間を仮で入れておいて下さい。今回は一旦「40秒」としています。
「背景色」は黒にして下さい。ここもエンドロールの背景色に合わせて変えて下さいね。

ここまで出来たらOKを押して下さい。「コンポジション」パネルが真っ黒な状態で開けたかと思います。


2.IllustratorのデータをAfter Effectsに取り込む

「プロジェクト」パネルにIllustratorのデータをドラッグ&ドロップします。

下記のようにモーダルウィンドウが出てきたら、「レイヤーを統合」を選択してOKを押します。
こうすることで、Illustratorで作ったデータがレイヤーで分かれていても、背景や文字などを1つの画像として読み込むことが出来ます。


3.読み込んだデータをタイムラインに乗せる

「プロジェクト」パネルにデータが読み込めたら、そこから「タイムライン」パネルにドラッグ&ドロップします。

ここまで来たら、「コンポジション」パネルでIllustratorで作ったデータが見れるようになっているかと思います。


4.位置を整える

エンドロールの始まりは、テキストの映り込んでいない真っ黒な画面から始まるのが一般的です。
※今回は背景が黒いシンプルなエンドロールなので上記のようにしています。写真を使用したりカラフルなエンドロールの場合は、そちらに合わせて下さいね。

今のままだとエンドロールの中盤あたりが中途半端に「コンポジション」パネルに表示されていますので、まずエンドロールの頭の部分が表示されているように位置を整えます。
「整列」パネルの「垂直方向の上に整列」を選択してください。

次に、エンドロールを「選択ツール」で直に選択し、画像を下げてテキストが全く見えない状態にします。


5.エンドロールを動かす為の指定

エンドロールのように、下から上へ要素が流れていく動きを付けたい時は、画像の動き始めと終わりの「位置」を指定する必要があります。

まずは、画像の動き始める位置を指定します。
「タイムライン」パネルの「ソース名:エンドロールムービー.ai」の左側にある、三角のアイコンをクリックします。
クリックすると下部に「トランスフォーム」と出てくるので再度クリックします。
いくつか項目が出てきますので、「位置」と書いてある行のストップウォッチのようなアイコンをクリックします。

ここまで来ると、同じく「タイムライン」パネルの右側が下記の図のようになっているかと思います。

「キーフレーム」と言う青いひし形のアイコンが表示されています。これで、エンドロールの開始位置を指定することが出来ました。
今の状態は「0秒の時、エンドロールムービー.aiはここにいるよ」と言う事を表しています。

次に、終了地点を指定します。
「タイムライン」パネルの「時間インジゲーター」を右端(終了時間)へ寄せます。

「整列」パネルの「垂直方向の下に整列」を選択してください。

続けて、エンドロールを「選択ツール」で直に選択し、画像を上に移動させてテキストが全く見えない状態にします。

ここまで出来たら、「タイムライン」パネルに「キーフレーム」が出来ているか確認してみましょう。
下記の図のようになっていたら、エンドロールの終了位置を指定することが出来ています。


6.実際にエンドロールを動かしてみる

動画を書き出す前に、動きをチェックしましょう。「プレビュー」にある再生ボタンで再生できます。

問題ない方は、手順8へ行ってください。
動画が早すぎたり遅すぎたりして、文字が読みづらい…と言う方は、手順7を確認してください。


7.動画の時間を変更する

メニューバーの「コンポジション」→「コンポジション設定」を選択。
「デュレ―ション」の時間を変更します。動画を都度再生しながら最適な長さに調節してみて下さい。

エンドロールの特性上、多くの人が一斉に見たり読んだりすることになりますので、読むのに十分な時間を確保してあげてください。


8.動画を書き出す

「ファイル」→「書き出し」→「Adobe Media Encoder キューに追加」を選択します。
Adobe Media Encoderが開きますので、下記の図の再生マークを押すと書き出しが始まります。

これで、エンドロールは完成です!
実際に書き出した動画が下記になります。この流れで作るとこんな風になるんだなと言う参考程度に見てみて下さい。

※この動画はブログ掲載用に設定を調整しています。


おわりに

いかがでしたでしょうか?
実際に動画として完成するとちょっと嬉しくなるのではないでしょうか!

今回はスタンダードなエンドロールの作り方でしたが、背景を変えたり、写真を載せたりするだけでもガラッと雰囲気が変わります。
ぜひ色々試してみて下さい。そして、思い出に残る素敵な結婚式のエンドロールムービーを作って下さいね!

それではまた!デジマースのコンでした。

新米デザイナーが作る!バナーの作り方

こんにちは!あけましておめでとうございます。ユイPです。
今年もよろしくお願い致します。
私は学生の頃、年末年始は巫女さんのバイトをしていたので今年は久しぶりにゆっくりしたお正月を過ごす事が出来ました。
お正月が終わったら次のイベントはバレンタインですね!


さて、今回のテーマはズバリ!「バナー制作」です。

私がデザインチームに配属になって半年が経ちますが、この半年間での私の主な業務はバナー制作でした。これまで制作したバナーの数は約300個弱です。
そんな私がこの半年間でバナーについて学んだことを踏まえて、制作過程を解説していきたいと思います!

★バナー記事第二弾(2018年10月更新)→バナー制作でおさえておきたいポイント

バナーとは、広告や宣伝のために使われる下のような画像の事です。

バナーをクリックする事で見せたいページに飛ぶ事が出来るので、主に「クリックしてもらう」事が役割となります。
表示される場所は自社サービス、もしくは他社のサービス上です。
文字のみのバナー、画像と文字を組み合わせたバナー、縦型や横型と種類やサイズも色々とあります。

掲載場所やターゲットによってバナーのデザインや訴求ポイントは大きく変わります。
種類は多々あれど、「このバナーで誰に何を伝えたいのか」まずはそこをしっかりと踏まえて制作する事が大事です。

ちなみに私がバナーを作り始めた初期のバナーは大体こんな感じでした。

作り始め感満載ですね…。

今回はこのような依頼が来たという設定で制作していきます。
————————————————————————————————
▽サイズ 1080×360
▽掲載場所:自社サイト内
▽少女漫画の特集のバナー(無料試し読みあり)
▽ターゲット:女性
▽掲載文言
【もうすぐバレンタイン!青春する準備はいい?甘い恋物語10冊無料♡】
▽イラスト素材2点(どちらを使っても両方使ってもよい)

————————————————————————————————

早速作っていきますが、まずは深く考えずにキャンバスを作成してイラストや文言を何も加工せずに配置します。

とりあえず女の子のイラストのみを使用することにして、イラストは右、文言は左側かなとざっくり配置しました。フォントも普通のゴシック体のままです。
後から加工しやすいように文言はここであらかじめ分解しておきます。
色やサイズを変えそうだな…という場所は特に細かく分解します。ちょっとめんどくさい作業ですがのちのち作りやすくなりますよ。(もうすぐ/バレンタイン!/青春/する準備はいい?/甘い/恋/物/語/が/10冊/無料/♡)
素材の画像の編集(透過作業など)があればここで行っておきます。今回使用しているイラストは自前です!

また私は実際に作品を扱うバナーの際、作り始める前に公式サイトを検索してみたりどんな内容のお話なのか軽く試し読みしてみたりしています。
作品に100%合わせる必要はないですが、どんな作品か知っておくと純粋に作りやすいです。

バナーの目的はただ見てもらう事ではありません。クリックしてもらう事です。そのためには、どこに目をつけてもらうか考えて制作していかなければなりません。まだほぼ加工してないこの状態で、文言の強調したい部分を決めていきます。

見やすく、遊び心も加えながら大体こんな感じかなと文字を置いてみました。
今回まず一番強調するべき点は「無料」だと考え、無料の文字を一番サイズを大きく目立つ位置に配置しました。
あとは何が無料なのかも伝わらなければ意味がないので無料の次に「恋物語」も強調していきたいですね。恋物語と書いてラブストーリーです。

ピンクで囲ってある部分①がメインとなる目立たせたい文言、青で囲ってある部分②がそれを修飾するサブとなる文言です。
強調したい部分が決まったらフォントや背景も決めていきます。

文言のテーマ的に背景はやっぱりピンクかな~フォントは可愛らしく落ち着いたやつがいいかな~というイメージでこのようにしてみました。
あとはやはり「恋物語」の特集だし女性がターゲットならば男の子も欲しいな?いうことでイラストの配置も少し変えてみました。

強調したい部分や大体のレイアウトも決まった所でさあ色をつけていくぞ!

…といいたい所ですがその前にまずとても大事な作業があります。
「字間の調整」という作業です。

現時点でのバナーをよく見てみると…

このピンクで○した部分や線の部分、文字が詰まりすぎていたり、広がりすぎていたり…なんとなくまとまっていないと思いませんか?
見やすいバナーにするために、ここを調整していきます。調整は使うフォントを決めてからやりましょう。
(Photoshopでの細かい調整のやり方やそもそも字間って何?という方はこちらの記事をご覧ください。→たのしい文字組み 字間を調整してみよう)

調整したものがこちらになります。
細かいですが、文字のバランスが良くなって見やすくなったと思いませんか?
同時に「青春する準備はいい?」という文言の「する」や「は」や、「恋物語が」の「が」といった接続詞のひらがなを少し小さくした事で文章にメリハリがつきました。

また文字の位置の揃えも調整しました。
文章の端っこと端っこのラインをあわせてあげるとバランスよく整います。
変則的な組み方をする場合でなければ、端っこは出来るだけ揃えておく事が大事です。

文字の調整も終わった所で、次に背景を装飾していきます。
え?文字の装飾じゃなくて背景からやるの?と思うかもしれませんが、私の場合は背景の装飾を決めてからその背景の上でも見やすい文字の装飾を行っていきます。

ピンクの色合いを少し変え、キラキラしたテクスチャを載せてみました。なぜこれにしたかというとチョコレートっぽさを感じたからです。

背景が決まったところで遂に念願の(?)文字に色をつけていきます。

まず強調したい部分から色を決めていきます。
ここが強調したい部分にはやはり濃いめの色、赤や青、オレンジ…背景が黒の時は白、など目立つ色を使っていきます。

まずこのように色を置いてみました。
このようなバナーの場合、色数は多くても3~4色程度に抑えて出来るだけごちゃつかないようにしたいです。
ただこれでは色合いも同系色でメリハリがなく、白文字も少し読みづらいですし何より面白みがないですね…。
なのでメリハリを意識しつつ、遊び心も感じられるように装飾していきます!

こんな感じになりました。
茶色の地を入れて文字を黄色にした事で目立たせたい文言が更に強調されましたし、画面に締まりが出たと思います。
何よりピンクと茶色の色合いがバレンタイン感をより強めてくれました!

ここまできたらあとはもう色味や文字、イラストの位置などレイアウトを再度確認して調整するのみです。
字が間違っていないか…文字間の調整の見落としがないか…などもここで確認してしまいましょう。

微調整が終わってしまえば晴れて…完成です!
「もうすぐバレンタイン!青春する準備はいい?甘い恋物語が10冊無料♡」バナーが完成しました。


いかがでしたでしょうか。

今回の記事ではイラストを使用し、「無料」という文言を強調させるようなバナーを制作しましたが、最初に書いた通りバナーにもたくさん種類があります。今回この記事で作成したバナーは、オシャレさというよりかは「見やすさ」や「訴求力」が重視されるバナーです。
普段私はそのようなバナーを作る事が多いのですが、最初の頃はやはりオシャレに作りたくて細めのフォントを使ったり色数を少なくしたりして作ってしまっていました…。それが悪いわけではありませんが、求められているものと遠いものを作ってしまうのはいい事ではありませんよね。

最初に書いた事の繰り返しとなってしまいますが、掲載場所やターゲットによってバナーのデザインや訴求する部分は大きく変わります。
「このバナーで誰に何を伝えたいのか」ターゲットを見据え、求められているものを作る。そこをしっかりと踏まえて作る事がバナー制作において大事な事だと思います。

私もまだまだ勉強中です。日々先輩方に助けて頂いています。
これからもたくさんバナーを作ってもっと成長していきます!

長くなってしまいましたが以上、ユイPがお送りいたしました。
皆さんもこの1か月、バレンタインに向けて美味しいチョコレートをたくさん食べてください♡

★バナー記事第二弾はこちら→バナー制作でおさえておきたいポイント

————————————————————————————————

デジマースブログ公式ツイッター・インスタグラムを開設いたしました。

★Twitter https://twitter.com/digi_design_
★Instagram https://www.instagram.com/digi_design_/

記事と合わせましてこちらもよろしくお願い致します。

パッとしないレイアウトにはメリハリを

緩めることと張ること。強めることと弱めること。(声のトーンなどを)上げることと下げること。などの強弱がはっきりしていること。を【減り張り】と呼びます。

プレゼンテーションソフトウェアでのスライド製作や、バナー制作などをしていると、どうしてもデザインが上手くまとまらない…と思うことはありませんか?
実はメリハリを意識して製作をするだけで見栄えが大きく変わります。
デザインにメリハリを付ける事でレイアウトが単調になる事を抑えることができます。また、画像や文字の要素の優先順位が明確になり、視認性、可読性を上げることができます。
では早速、デザインにおけるメリハリの出し方をいくつかご紹介いたします。

文字サイズでメリハリをつける

本文に対して小見出しや大見出しを大きくすることでメリハリがつきます。「当たり前だろ!」「私もそのぐらいやっているよ!」と思うかもしれませんが、この状態の事を専門的な用語で表現すると「ジャンプ率が高い」と呼びます。
文字におけるジャンプ率とは「本文の大きさに対する大見出しや小見出しの大きさの比率」です。このジャンプ率を意識する事でレイアウトにメリハリを出す事ができます。ジャンプ率が低い場合はメリハリが出にくくなるためホワイトスペースや色でバランスを調整します。また、ジャンプ率の調整により印象も変化します。
あなたがレイアウトに不慣れで構成に迷った場合はジャンプ率を高めに設定する事をオススメします。高めに設定した方がメリハリが強くなるため構成をまとめやすくなります。

ジャンプ率が高い状態: 元気・明るい・活発・ダイナミック・アクティブ な印象

ジャンプ率が低い状態: 高級・落ち着いた・ 優美・高尚 な印象

ホワイトスペースを活かしメリハリつける

要素の周りにホワイトスペース(余白)をとる事で「間」と「要素」というメリハリが出ます。それだけではなく、見ている人の注目する要素を限定するため、要素を目立たせる事ができます。また、スペースが大きくとられていると上品で洗練された印象になるため、ファッション系の広告やwebサイトで良く取り入れられています。
ホワイトスペースを大きく広げたシンプルなレイアウトは、バランスが悪かったりなどの粗が目立ちやすいので注意が必要です。
私が学生だった頃、先生が「間(ま)の美」を大切にしろと言っていた事を思い出しました…。

色でメリハリをつける

全体が同系色でまとめられていると落ち着きのあるレイアウトになります。そのレイアウトにあなたが物足りなさを感じた場合、どこか一ヶ所だけ色を変えてみてください、あるいは加えてみてください。メリハリが出るだけではなく目線を優先度順に自然に動かす事ができます。
複数の色をいくつも組み合わせることは、慣れていない方が行うと難しいため、差し色で1色足すぐらいがいいと思います。


色を足す場合、目立たせたいからといって大量に足す必要はありません、少量でも周りとの対比により目立たせることができます。

修正前(うわぁ…いかにもあのソフトウェアを使用した感じ…どうしよう…)
※メイリオを使用しています。

修正後(色を追加)レイアウト全体が黒で構成されているため、このように黄色が少量でもとても映え、メリハリが出ます。


さらに、ホワイトスペースを意識したレイアウトにするとこのようになります。

さらに、要素を削り(ページ分け)前述したジャンプ率・ホワイトスペースを意識したレイアウトにするこのようになります


どこかに違和感のあるしまりのないレイアウトだと感じた場合には、メリハリが出るように修正してみてください。文字のジャンプ率を変えたり、ホワイトスペースをとってみたり、色を付けてみたり…。いずれも思い切って調整をしてみると以外に良くなったりします!

(はら)

Webデザイントレンドとテクノロジーの必然的関係性

「トレンド」と書くとポジティブで先進的なイメージですが、
「流行」と置き換えると少なからずネガティブを感じます。

今回はそんな流行り廃りもあるWebデザイントレンドとテクノロジーの関係を考えてみます。


過去のトレンドとテクノロジー

まずは、
歴史ある量産性ともなう印刷技法として、
「シルクスクリーン印刷」を紹介します。

メッシュ目の素材に特殊な薬品を使って、
インクが通過する部分をつくることで版を作ります。
プリントTシャツなど単色表現、もしくは重ね合わせによる多色構成が可能な技法ですが、
その独特な仕上がりと印刷される側の自由度が高いため、
現在も活用され、1950年代後半から、商業、ポップ・アート、
芸術作品の表現手段として用いられました。
引用元:google画像検索
アンディ・ウォーホル/ マリリン・モンロー/1967年

シルクスクリーンによる表現も当時は先進的なグラフィックデザインとして捉えられ、
数多くのポップ・アートが商用利用されておりました。

重要なのは、その表現にはテクノロジー/テクニック(技術/技法)が伴っていたことです。

コンピュータの進化により、
独特な手順と工程、器具が必要であったこれらの表現も、
コンピューター上で疑似的に再現が可能となりました。

「規則的に凹凸のある紙にクレヨンで引いた線」や、
「こすれたマットな表面ながらも鈍く光るエッジを持つスチール表現」など、
デザイナーとして本質を知らなければ組み込みの発想に至らないため、
表現理論を知ることは必要です。


画面のトレンドとテクノロジー

それでは、過去のソフトウエアなどの画面表現について確認してみましょう。

画面表現は制約の歴史です。

1980年代の「8ビット」の時代は、限られた画面解像度と色パレット制限がありました。
使える色は、光の三原色をオンオフして再現可能なわずか8色
(黒、白、赤、緑、青、黄、紫、水色)でしたが、


この時代でも技術を駆使して高見を目指し、トレンド表現を作っておりました。

代表的な表現として、
少ない色数から新たな色を認識させる「タイルペイント」技法がありました。

2色をタイル状に交互に並べることで、
遠目で見ると2色の中間色を再現しています。
間隔を調整することで濃淡も再現できます。
モニターのコントラストが低く滲んでいる方が自然に見えたりもします。
この苦肉の策の技法は、現在も
「ディザ」処理(インデックスカラー256色など、少ない色数で段階の多い素材を再現する)として使われています。


テクノロジーの違いによる表現の違い

それでは最近のWeb表現トレンドである、
「グラデーション」について比較説明します。

グラデーションはGIFやPNGなどのビットマップ画像の場合、段階表現を増やし滑らかな色変化を再現するには多くの容量を必要とするため、利用できる機会が必然的にありませんでした。

グラデーション画像を運用する為には、容量を可能な限り軽くする必要があり、結果、滑らかなグラデージョンは失われ、再現できませんでした。

現在ではアイコンをはじめ多くの表現としてグラデーションが使われていますが、可能にしたのは下記要因です。

・回線情報転送量の拡大 ※【秒間】64kバイト程度 → 数メガバイト単位
・画像表示メモリ増
・演算によるリアルタイム表示 ※従来は書き出した画像での表示

CSSやSVG[Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)]
で表示出来るようになった点もありますが、
もっとも影響が大きいのは、
画像を減色等、最適化しなくても実運用に持ち込めるようになった回線速度テクノロジーの進化の影響ではないでしょうか。


高速かつ複数コア化したCPUの恩恵

回線速度の進化と並行して強力高速になったのはプロセッサ類です。
機器の処理速度をつかさどる頭脳ですが、
一旦の高速化鈍化を迎えながらも、
複数コア化によりさらに多くの情報を処理できるようにテクノロジーが進化したため、
いわゆる「力技」が出来るようになったのも大きいと考えます。

過去の非力なCPUでは画面の描画に時間がかかり、
JavaScript等による処理も足かせになって表示ストレスを生んでいましたが、
悪い意味で、無駄が多くで扱いやすい低速プログラミング言語や不適切なマークアップでも、
そこそこに見れるものが再現出来てしまう時代になりました。

結果、
段階表現がとても多く重いメガバイトレベルのグラデーション画像でも、ストレスを感じさせないレベルで運用できる環境が出来てしまっています。

不自由を感じる状況があるとすれば、
速度制限を受けたユーザー利用シーンの場合でしょうか。


まとめ

以上のように、
過去は制約上なしえなかった表現が現在のテクノロジーでは可能となり、
リッチでマテリアル感を押し出した表現ができている、
という見方もできるのではないでしょうか。
また、
最適なマークアップやプログラミングが出来ていなくても運用できることで、
専門工程職の必要性がなくなりつつあるのも時代の流れと感じますが、
Webやアプリに関係するグラフィックデザイナーに対しては、
必然的に総合スキルを求められる時代になってきたのだと深く考えさせられました。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

WEBページの構築/運用/注意点

今回は、弊社コーポレートWEBページのレスポンシブ化とリニューアル再構築にあたり感じたことを記事にします。


HTMLのワンソース化

今回のリニューアルではまずはじめに

「HTMLのワンソース化」

が目的として上がりました。

理由は単純で、「SP版」「PC版」と静的にソースを分けて運用する運用者の「2度手間」の改善です。
したがって、
レスポンシブ化(HTMLは複数用意せずにCSSを解像度等により出しわける)は担当者の必然として話が進みました。


レスポンシブ化のメリット

レスポンシブ化により得られたメリットはこちらです。

・ワンソースによる更新リソース減

・表示器機の画面幅解像度によるレイアウトの出し分け

・PC/SP集約によるSEO効果改善


レスポンシブ化のデメリット

それでは反対に今回の実装で感じたデメリットはこちらです。

・SPでの表示画像容量拡大
(PC版と同じ大きさの画像を扱うため/状況に応じて非表示になる画像も読み込むため)

・レイアウトの最適化が難しくそれぞれを考慮した構成が必要(縦横比率/可読性の考慮)

以上の2点です。

グラフィックデザインの視点から見ると、最適な状態の画像が使われるのではなく、
問題が出ない範囲で一つの画像が使いまわさせるネガティブを感じました。
(適応されるCSSに応じて読み込む画像も変更出来れば解決できますが…)


別手段を考えてみる

ワンソースでの運用はレスポンシブに限ったものではないはず!と他のやり方を考えたときに、
CSSの出し分けではなく、運用者が直接変更した「外部テキストファイル」をPHP等により参照、構築する、従来の方法に結局行き着きました。

この動的な構築の場合、
レイアウト変更は難しいですが、
日々の情報の更新は、データファイルを書き換えて本番環境に上書きアップすることで可能になるので、
WEB知識のない運用者でも更新が容易になります。


まとめ

CSS(スタイルシート)による運用などは、知識がある方が日々の運用する場合であれば使い勝手が良いので業務効率が良くなります。
しかし、現実に日々の運用する担当者の場合はどうでしょう。

「WEBページの運用者」 = 「利用者」

とするのであれば、
あえて先進的で効率的な構築手段を使わない設計も、状況によっては必要だと感じました。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。