おでんの広告の謎!?

以前、弊社鈴木のブログ内にて、セブンイレブンのおでんの宣伝をしている横断幕の話題が出ていたのを覚えていらっしゃいますでしょうか?

見かけた横断幕は細長い横長で、文字であらわすと

 

ありがとう \おでん/

 

斜線の部分は緩くカーブをしているデザインです。白地に赤で描いてありました。

おでんを器に盛っているようなデザインなのですが、
お皿の底部分は見切れていて「おでん」のサイドにだけカーブを描いた線がある状態です。

お皿に盛っているイメージなのかな?
いや、あれは顔文字ヾ(o´∀`o)ノ♪←のように、おでん万歳!みたいな手なんじゃないか?
そもそも何か伝わらない段階で、デザインとして駄目なんじゃない?

などと、健康診断に行く道中に盛り上がっていました。
この時、まだおでんは始まっていなくて、全貌がわかっていなかったのですが…

先日セブンイレブン店内で見かけたのは、人の顔、口の部分としてカーブが使われていました!

ニッコリとした口元です!
口だったのか!!!
と思い、店内をいろいろ見渡せば、ポスターにはおでんのお皿として、手書きのポップには日本の国旗のような形で赤丸と曲線が描かれていました。

 

一瞬見た時には「何を表しているんだろう?」というデザインは、様々な形で使えるデザインだったのです。

 

デザインを考える時に、わかりやすくデザインすることも重要です。

けれど今回のように、一つの形がいろいろな意味を持って使えるデザインというのも、様々な展開がしやすく、遊び心を感じます。また、あえて漠然とさせることで「なんだこれ?」と見てしまい、印象に残ります。もちろん上手くデザインをしなければ、ただ意図の伝わらない駄目なデザインになってしまうのですが(汗)

「なるほど!」な素敵なデザインを見つけた時、ちょっと嬉しくなります!

デザイン被りを避けたい!年賀状素材、配置の工夫

年始に届く年賀状。
自分が使ったデザインかぶった!!!
同じデザインの年賀が複数枚!?
なんてことありませんか?

文具店や本屋さんに行くと、年賀状のコーナーを見かける時期になりました!

写真から年賀状を作成する方も多いとは思いますが、年賀状に使えそうな写真が無い場合や、会社名義の年賀状は写真付きの年賀状ではなく、イラスト入りのデザイン年賀や書店で販売されている年賀のデザインから作る方もいると思います。

比較的多いのは、ハガキ全面がデザインされていて、住所氏名などの個人情報と挨拶文だけを差し替えられるようなもの。手間もかからないし、デザインのバランスが崩れることもないのでとても使いやすい反面、、、他の人と被る可能性は充分あります。

他の人とはかぶりたくない!

そんな時には全面デザインされたデザインよりも、小さいイラストとして用意された画像を自分なりに配置するだけで、他の人とかぶる可能性が少なくなります。

今回は来年の干支「戌年」にちなんで、足跡のイラストから
いくつかレイアウトの方法を紹介します。

 

画像を配置する場所と大きさを工夫する

画像をあえてはみ出させる

背景として並べてみる

画像の色を加工したり、変形させて奥行きを出す

使ったことありますか?予約投稿

学生時代はゆったりと流れていた1年の時間も、社会人になったとこから猛スピードで過ぎていきます。
11月に入ったな…と思っていると、アッと言う間に年末年始が来ることをようやく学びました。

特に12月の中旬頃から、クリスマス・年末・年始とイベントが続き、職種によってはイベントに合わせた企画を展開。
告知もその都度必要です!!

時間がある時に前倒しできそうなことは、少しでも準備をしておきたい!

日記や新着情報として使っていたいているブログには、予約投稿というものがだいたい用意されています。
これを使えば忙しい時期を避けて事前に記事を用意することができます♪

どんな時に使うのか?

「本日より半額セール!」
「メリークリスマス」
「年末の挨拶」
「新年の挨拶」

当日は忙しくてブログを書く時間が取れなかったり、休日はゆっくり休むから更新作業はしたくない…こんな時に便利です。

WordPressの場合

 

アメブロの場合

 

はまぞうの場合

 

お問い合せフォーム・アンケートフォームに設置できる項目

ホームページに設置されているお問合せフォームやアンケートフォーム、皆さんは利用したことありますか?

ホームページにお問い合わせフォームを設置する場合、シンプルな機能だけがあるお問合せフォームが利用されやすいという傾向があるそうです。
複雑な質問が多いほど、回答が面倒になってしまったり、該当するものが無い場合には利用者を迷わせてしまうというのがその理由。

「氏名」
「連絡先(電話・メール)」
「問い合せ内容」

最低限この3つがあれば、問い合せをしてくれた方に連絡することができます。
ホームページからのお問い合わせ数を重視する場合には極力シンプルを心がけています。

ではこの他に、フォームにはどんな種類があるのか?
シンプルがベストだと言っても、多少は事前の情報を聞いておきたい!だけどどんな機能がつけられるのか?
今回はフォーム内容に設置できる、いろいろな機能をご紹介します。

1行テキスト

氏名・ふりがな・住所など、様々な用途で使える、1行の書き込みエリアです。
回答が長くならないような内容に使います。
電話番号やメールアドレスを書いてもらうように使う時には「〇桁の半角数字のみ」「半角英数記号のみ」などある程度の制限をかけることもあります。利用者が半角の切り替えできることを前提としているので、あまり制限をかけない方が利用してもらえます。問い合せ量が多く、いちいち変換をすることが難しい等の場合、このような対策を取ります。

チェックボックス

提示する内容から、複数選択をしてもらえる項目に使います。
チラシ製作
ホームページ製作
動画制作
その他

ラジオボタン

提示する内容から、複数選択をさせたくない場合に利用します。
成人済
未成年

セレクトボックス

チェックボックスやラジオボタンと同じように選択する内容がある場合に利用します。
セレクトボックスを利用する時の特徴としては、項目が多数ありすべてを表示させると探し出すのが大変な場合(都道府県や西暦など)や、フォームをすっきりとレイアウトさせたい場合などに使います。1つしか選択できないように見えますが、複数選択できるようにもできます。(あまり知られていないので、フォームを使う人には気づいてもらえないかも…)

テキストエリア

お問い合せの本文、複数行書けるエリアを設置します。

ボタン

「送信」「確認」「リセット」「戻る」などボタンを設置します。
※下記のボタンはクリックしても反応しません。
 

上記の他に、ファイルや画像を添付させる項目などもあります。
ただし、ファイルや画像を添付できるようなフォームを設置した場合、データ量の大きい内容を送られてきたり、データ量を制限したフォームにした場合には、利用者さんが送信するファイルのサイズを把握していることが必要となります。設置には注意が必要です。

ホームページのお問合せやアンケートに、こんな項目を付けてみたい、というご相談などありましたら、気軽に聞いてみてください。

降水量や河川の水位をチェック

最近雨の日が多いですね(涙)

通勤手段が原付なので、連日の雨でレインコートも靴も乾かずツラいです。
極力雨量の少ないタイミングを狙いたい…そんな私が欠かさずチェックするのが「雨雲レーダー」雨量や雲の流れが地図上で時間経過と共に見られるサイトです。パソコンはもちろん、スマホでも使えるの見たことがある人も多いかもしれません。
予報なので100%的中なわけではありませんが「数分待てば小降りになる」「数分後のゲリラ豪雨」に対策を立てられます!

■雨雲レーダー

雨が続いたり、ゲリラ豪雨で心配になるのが河川の状況。
私の住んでいる地域が水没地域と周囲では評判になるような浸水しやすい地域なため、道路が封鎖されてしまうことがあります。事前にわかれば待機したりできるので、河川の状況をウェブカメラで確認できるサイトもとても重宝しています。

■国土交通省 浜松河川国道事務所 天竜川・新豊根ダム・菊川のようす

一周回って新鮮かもしれない!?フィルム&インスタントカメラの話し

今の若い子が「写るんです」がわからないと(涙)気持ちは常に若くありたいと思っていても、世代間ギャップに現実を突き付けられます。

そんなフィルムカメラやポラロイドカメラ。実は若い子の間で流行り始めているのだとか!?
『現像しないと何が撮れているのかわからないのが面白い!』
こんな特集記事を見つけてしまい………そっか、オモシロイんだ・・・(=△=;)
撮り直しができて、その場で確認できるデジタルカメラ世代ならではの感覚ですよね。

そこで今回は私と同じ世代なら知っている人も多いだろうけど、若い世代には逆に新しい!?カメラの話しです。

撮影シーンに合わせてフィルムを選ぶ必要がある!

デジカメでは夜景モード・雪山・ポートレートなど撮影シーンが選べるようになっていたり、自動で切り替わってくれたりする機能が備わっています。これは「感度」という写真を綺麗に撮影されるのに必要な光の量を調整している機能です。
フィルムカメラの場合、この機能がカメラではなくフィルムに備わっています。
夜景や暗い場所では高感度フィルムのISO1600-3200、雪山や夏の海など光の量が多い場所ではISO100で撮影。適切なフィルムで撮影しないと、暗すぎて人の顔が見えないとか、明るすぎて色が全体的におかしいというような状態にあります。
今はカメラにその機能が備わっているので、1枚ごとに撮影シーンは切り替えられますが、フィルムメラの時代はフィルム1本その撮影シーンに使わなくてはいけませんでした。
ちなみに一般的な使い捨てカメラにはISO400という感度のフィルムが使われています。

フィルムカメラの期限!?

食品のように…フィルムカメラには期限がついています。だいたい2年前後だったと思うのですが、使い捨てカメラが流行していた時には、撮りきれなかったので保管→そのまま忘れて5年経過みたいなこともありました(笑)期限切れになってしまったカメラはどうなってしまうのか………。保存状態にもよりますが、あまり環境のよくない状態(フィルムは高温に弱いです)だと、数十年前に撮影した写真のように色褪せた状態になってしまいます。
使いかけのフィルムカメラは極力温度が低いところで保管してください。

チェキで撮った写真の保存方法

インスタントカメラ・ポラロイドカメラ・チェキで撮影した写真。これをその場だけで楽しむ分には問題はありません。長期保存したい場合はポラロイド写真のままでは無理です!年数経過で色がどんどん劣化していきます。通常の写真よりも劣化スピードが速いのが特徴です。この写真を長期保存する場合には、スキャナで読み込んでデジタル保存をするか、写真として保存する場合にはカメラ屋さんで「ダイレクトプリント」というのをお願いすると、通常の写真にしてもらえます。

以上、一周回って新鮮かもしれない、フィルム&インスタントカメラの話しでした!

動的ページの設計

以前ホームページには表示させるだけの「静的ページ」、新着情報のように毎回掲載されてる内容が固定ではない「動的ページ」の2種類を簡単に説明しました。

今回は動的ページの設計、どんな流れになっているのかを解説します。

例として、データベースに保存されている情報を、ホームページで表示という依頼があったとします。

データーベースとはお客様情報や社内で扱っているデータの倉庫のようなものです。「商品名」「値段」「発売日」「写真」という内容があって、それがExcelのような形で保存されているという感じです。発売日順の並び替えや、一定のルールに該当するものを表示させたりすることが可能です。Excelと似ている部分も多いのですが、データーベースはデータまとめるのに特化したもの。Excelは計算機能に特化してると思えばわかりやすいかもしれません。

このデータベース。集めた情報をホームページに掲載することも可能です。ホームページ上で見かける、わかりやすいデータベースの例としてはショッピングサイトなどがあります。ショッピングサイトのデータベースでは「商品名」「商品ジャンル」「金額」「画像」などがデータベースとしてあり、買う側はそのデータベースから検索をし、購入したい商品を絞って検討するという流れになります。

・会員登録機能がほしい
・検索で商品を探すシステムがほしい
・会員登録した人にだけ見える写真を設けたい

上記の条件を踏まえた上で、ページの設計をしてみたのが下の図です。

これが最低限必要だと思われるページです。

動的ページを作成する場合、〇〇に該当する人はページA、それ以外の人はページBというように、一つのクリックボタンから条件次第で別のページを表示させることがあります。
条件次第で次のアクション(動きや表示させるもの)が変わって来るため、動的ページを作成する場合には「何をどう表示させたいか」を事前にしっかりと設計しないと、条件の数(ページA・ページB・ページC等)がどれくらい必要なのかがわからず、納期や見積もり金額がぼんやりしてしまいます。
表示させる内容や条件が多くなればなるほど、複雑なページ構成にはなってしまうのですが、このようなシステム。ホームページを見る側としては必要な内容だけを探し出せて便利な機能なので、興味がある方はお問い合わせください。

 

課金ゲームの確率

ファミリーコンピューター時代からゲームが大好き!
RPGで好きなシリーズは、やりこみ具合を言うと若干引かれるレベルでゲームをやりこんでいました。
ゲーム生活を日々送っているわけですが、ここ数年はハードゲームよりも課金型のゲームシェアが強いですよね。
ゲーマーとして!とりあえず手を出してみようと、広く浅く手を出してみたりしています。

 

課金しない範囲で!

 

もちろんお金が余るほどあれば、喜んで課金しますとも!だって課金すれば良いアイテム、良い結果を目指せるわけですから!ただ、この課金、やり始めると歯止めがきかなくなりそうで(苦笑)怖くもあります。

そんな課金ゲームでよくあるのが、レアアイテムをGetできる確率の話し。

1/100 … 超レアアイテム
9/100 … レアアイテム
90/100 … 通常アイテム

こんな感じの提示があったとします。
100個購入すれば必ず1個は超レアアイテムが手に入る!
単純に考えると、こう考える人が多いと思います。

ところがこのようなシステムを作る側を知ってる立場からすると
この表記に惑わされてはいけないな!と。

通常イメージする確率というのは
1人目…1/100
2人目…1/99
3人目…1/98
と、激レアが出ない限り、分母の数が減り当選確率があがります。
当然100個アイテムが売れたら販売終了です。

ところがオンラインゲームの場合、
激レアアイテムを求めて買う人が100人だけとは限りません。
つまり分母の数が減ってしまっては販売終了になるので困ります。
オンラインゲームで提示されている「1/100」の場合
1人目…1/100
2人目…1/100
3人目…1/100
ということになってます。常に分母が100なので
普通に考えるくじ引きよりも当たる確率が低くなるのです。

・・・・・・・というようなことを、システムを作る側は知ってしまうので、
昔ほどゲームに熱くなれず、スッと引いてしまう自分がいます。
大人になったなぁ、と思う瞬間です。

よく見るロゴやマークが今後変わる?

今はほとんど使われていないのに、マークとしてはいまだに現役というマークが結構存在しています。

例えば電話マーク!ホームページを作る時にも「電話で問い合わせ」のアイコンとして、ダイヤル式の電話マークを使うことは少なくありません。世間的な利用率で行けば圧倒的にスマートフォンなのですが、ダイヤル式の電話を使えない世代の方でもマークとしては電話だと認識できていると思います。

またパソコンのソフトで保存をするアイコン・マークはフロッピーデスクです。もう使っている人も、知らない人もいるのにこのマークを使っているソフトは数多くあります。

デザインは流行を追うことの大切さもありますが、それとは別に多くの人に理解してもらえることも求められる場合があります。斬新なデザインは目新しく、かっこよくも見えますが、新しすぎてついて行けない人が続出です。

そしてアイコンやマークは限られたスペース内に簡潔なデザインで伝えるという場面が多くあります。電話のマークの場合、スマホユーザーが増えたことを考慮し、スマホのような長方形にデザインをすると、新規ファイルを作成する紙のマークに似てしまったり、スマホは電話だけでなくwebの閲覧にも使えるので混乱を招きます。

2020年のオリンピックに向けて、温泉のロゴ論争や、トイレのマークなど様々な見直しがされています。新しいマークを目にする機会も多くなると思うので、注目してみてみるといろいろ面白いかもしれません。

拡張子は表示する?表示しない?

拡張子はファイル名を付けて保存した際、保存名の後ろにつけられるアルファベットや数字のことを言います。

・保存名.pdf
・保存名.txt
・保存名.mp3
・保存名.wma
・保存名.jpg
・保存名.ai  などなど。

昔のパソコンは拡張子がデフォルトで表示されていた為、このアルファベットが見られる状態が普通でした。ところがVistaあたりから非表示がデフォルトになり、表示させる方法を知っている人だけが拡張子を表示させて使っています。

仕事柄、様々なファイルを取り扱う為、私はこの拡張子を表示させておかないと使いにくいのですが…。そもそも表示できることを知らない世代というのも増えていて、時々「不便じゃない?」と聞いてしまうことがあります。

返ってくる回答としては「アイコンでどのソフトのものかわかるから大丈夫」というのが多いのですが、これまた古くからパソコンをよく使う身としては、いやアイコンは拡張子から関連付けてるだけで、拡張子の判断にはならないでしょ!???と。

こんな話しを、友達にしていたら、パソコンに詳しくない人は普通知らないと言われました。
私、普通じゃなかった…。

 

そんなわけで、どうして拡張子を表示しなくなっちゃったの!?という話題から。

 

拡張子は、このファイルがどんなファイルなのかを示しています。
なので、ファイルの名前を変更しようとした時、うっかり拡張子ごと変更をかけてしまうと、何のファイルだかわからなくなってしまうのです。実際Vistaの前まで、お客様から「名前を変更したらファイルが開けなくなった」というトラブルが少なくありませんでした。どこでWindowsは「だったら拡張子変えられないように非表示にしよう!」←これが拡張子を表示しなくなった理由…という説をよく見かけます。

じゃあ何故拡張子が表示されないと困るのか。アイコンだけじゃダメなの?
アイコンだけじゃダメです!!!
例えば画像ファイルを例に説明します。写真の拡張子はrow、jpd、画像データはpng、gifなどがあります。
この4つの拡張子はすべてPhotoshopというソフトで開くことができます。更に、photoshopで編集途中のデータではpsdなんてのも存在ます。細かく言えば更に複数の拡張子をPhotoshopは取り扱えます。なので、どのアイコンもPhotoshopのアイコンになる(することもできる)ということになります。

ファイルを詳細表示にして選ぶ人は、詳細から拡張子を確認できますが、サムネイルのまま画像を使う際には元の画像の拡張子を知っておくことは重要です。

 

また、いろいろ調べていたところ、セキュリティなどを管理されている部門から、拡張子を表示させていないことで発生するトラブルとして、拡張子の認識が薄れ、見覚えのないファイルも気軽に開いてしまいウイルスに感染…という話しも聞きました。

出来れば拡張子、デフォルトの設定に戻してほしいなぁと、個人的には思います!

手書きで地図を描く時のコツ

カーナビやgoogleマップの活躍で手書きの地図を描く機会は昔より少なくなってしまいましたが、名刺やハガキなど、限られたスペース内に地図を入れたい場合、オリジナルのデザインで地図を作製することがあります。

形のないものをデザインするのはデザイン力が必要だと理解してもらえるのですが、地図もなかなかデザイナーさんの力量が問われるんですよ♪
学生時代、課題として取り上げられたりもしています。
知っている道を絵にする、マップの不必要な個所を抜いて書けばいい…簡単なことのようでいて、やってみると難しいのです。

ということで、今回は地図を描く時のコツをまとめてみました。

用紙の上が北になるように地図を書く。

東西南北を日常的に意識しているかは別として、駅の出口も「北口」「南口」など、東西南北で示しています。
駅から北口改札を出ると、背にしている側が南と認識します。
地図の東西南北が逆、もしくはずれていると、所見で目的地に向かう人は迷いやすいです。

画面を横切る道路・線には「至」をつける

東西南北がわかるように、地図のどこかに北を示すマークを入れることもありますが、画面を横切る主要な道路、線路などには「至 東京」「至 大阪」などを入れて表記しています。東西南北の目安にするためなので、1か所あれば大丈夫です。

目的地にどんな手段で来るかを想定する

目的地がわかりにくい場所だと、目的周辺を細かく書きすぎて、そこまでに至る道が入っていない!というような地図をたまにみかけます。バスで来る人には最寄りのバス停、電車を使う人には駅、高速で来る人にはインターを入れる必要があります。

掲載するルートを絞る

目的地たどり着くための道は複数あると思います。限られたスペースに描く地図には、主要ルートに絞って描くようにします。地図を見ながら来る人はその場所に不慣れな人なので、一番わかりやすいルートのみを描くことをおすすめします。

短縮できる場所は省略する

横長の用紙に縦長の入れる場合、実際は縦長な直線距離を短縮して描くことがあります。目的地にたどりつくには、曲がる箇所がポイントになります。エリア内に収めるために、省略できる時には省略してます。

交差点・信号機・交差点名

道路が交差している箇所は複数あり、幾つめの曲がり角かをわかりやすくする為にも、交差点名や信号機があるものは区別して交差点を描くと伝わりやすいです。

交差点名のない曲がるポイントにある目印

4つ角の曲がり角にそれぞれ建物が建っていたとします。記載する建物は「知名度の高い店」「看板が大きくわかりやすい」の他に、向かっている方向から見やす建物を掲載します。また角に目印にできそうな店がない場合、手前と通り過ぎたところにある両方の建物を記載することで、通りすぎてしまった時にも気づいてもらいやすくなります。

透過データって?

「透過データでお願いします!」

「?」

「あ、背景透明で…」

「背景を透明ですか?」

というようなやりとりを、過去に数度したことがあります。
仕事で普段やっていることだと、当然相手に伝わるだろうと思って会話してしまったことありませんか?私は頻繁にやらかす方です。。。反省。

今回は【透過データ】

知っている人は知ってるかもしれませんが…
書いて字のごとく。透明になっている部分があるデータです。
上のやりとりは、デザイナーさんからサイトに掲載する素材をもらう際
背景部分は透明な状態でくださいね…という説明の省略系です。

背景が透明………て?

まずは黒色背景を指定した箇所に、普通の画像を配置してみます。

次に写真中央に黒い画像を載せた画像を配置します。
一見、中央の部分は背景の黒が見えているようにも見えますが、実際は背景が見えてるのではありません。

お次は透過データ!これは上の画像と違い、中央の画像が切り抜かれた状態(透明になっている)データです。
この画像では、背景の黒が真ん中の色として見えています。

つまり透過データの場合、背景の色を変えると…

というようになります。

これが透過してある画像です!

ホームページに画像を掲載する際、
透過させていないデータとして画像を配置させても
透過データで背景に色を入れても見え方に変わりはありません。

ありませんが、背景の色が変わる可能性があった場合、
背景の色をコーディングで変えるだけではなく
画像の方にも修正を入れる必要があります。

透過データはウェブサイトをデザインする際にはとても助かるデータです。

オリジナルグッズを作ってみませんか?

毎日暑い日が続きますね。
私は社内からあまり出ることはないのですが、日々の出勤時間少しずつ日焼けし、着ている洋服の位置で変な日焼けをしています。これ、、、多分戻らないんだろうなぁ(涙)

新しい月刊メルシーにて、オリジナルパッケージで作るお菓子の紹介をさせていただきました。夏場は暑いので、チョコレートや飴など溶けやすいものはグッズとして作る機会も少ないのですが、秋~春にかけては注文も多くなり、配っている企業や団体も多いので、面白いパッケージのものがあれば是非教えてください♪

オリジナルデザインということで言えば、道端で配っているポケットティッシュやうちわ。コンサート等で作られるグッズのタオル、Tシャツなど幅広く存在します。配布する、多くの人に買ってもらうものなので、数量がまとまっていないと注文ができない………と思われがちですが、最近はロット数が少なくても作成してくださる会社も増えてきています。

また月刊メルシーで紹介した、キッドカットのパッケージや、チロルチョコのパッケージのように、すでにある商品にプリントしてくれるメーカーのサービスというのも増えてきました。

【ユニクロ】 ユニクロカスタマイズ
http://www.uniqlo.com/customize/top.html

自分の家のプリンターで印刷したものをアイロンで貼り付けるような転写プリントもありますが、転写用の紙自体も少しお値段がするものだったり、失敗する可能性も考えると、注文してしまった方が綺麗に安くできてしまったりもします。
(ただし納期があるので、すぐに欲しい人は難しいですね)

昔は無かったサービスも、ネットで検索すると意外と見つかったりすることも増えてます。「こういうサービスあったらいいのにな?」…と思うことは、検索するのは無料!是非調べてみてください♪

データーのお引越しエクスポートとインポート!

日本語にしてもらえればわかりやすいのに、英語で説明されると混乱するのは何故なのか…。
それは英語が苦手だからです(涙)
もっと真面目に英語の勉強をしておけばよかったと今更ながら反省してます。

今回はエクスポートとインポートについて。
「export(輸出)」「import(輸入)」という意味だそうです。ファッション関係では「インポートブランド」とか聞くことがあります。輸出/輸入と言うとインターネット上でどんな役割かわかりにくいのですが、簡単に言ってしまえばデータのお引越しです。

  • 筆ぐるめの住所録を書き出し、筆まめクラウド住所録へインポート
  • Outlook ExpressのデータをWindows Liveメールへインポート
  • LINEトークのバックアップとインポート
  • ライブドアブログからアメーバブログへ、エクスポートインポートで持ってくる

というような文章、言い方をしています。

古いパソコンにある住所録を、新しいパソコンにした時全部入れなおさなくてはいけない…
数年書き続けていたブログを引き継げない…
これではとっても不便ですよね。

エクスポートは現在使っているデータを荷造りして引っ越せる状態にすること。
インポートは荷造りしたものを、新しい場所へ配置すること、というようなイメージです。

エクスポートはバックアップと似ている感じもしますが、少し別物になります。
バックアップはデータをそのまま保存します。
エクスポートは引っ越し先でも使えるようなデータにします。

例えば…
[引っ越し前]アメブロ→[引っ越し先]アメブロ
この場合、バックアップデータでも大丈夫。

[引っ越し前]アメブロ→[引っ越し先]楽天ブログ
この場合、バックアップデータは使えません。エクスポートで引っ越します。

ブログの仕様が会社ごとに違っているので、バックアップデータをそのまま反映させようとすると、その仕様が引っ越し先にはなかったりして、正しく引っ越しができません。
エクスポートは引っ越し先で受け入れられるようなデータにする作業です。

そしてインポートは、エクスポートしたデータを引っ越し先に入れる作業です。
ほとんど新しい場所に適した形でデータを引っ越してくれます。

どちらの作業もボタン一つで終わることも多く、多少の操作があったとしても、データを入力しなおすよりとても早く完了できる作業です。
お引越ししたいデータがある場合、この機能があるかを確認してスムーズにお引越しをしてみてください。

WebデザイナーとDTPデザイナー

どちらもデザイナーとついているから一緒!………とは言えません。実は。
DTPデザイナーさんにWebのデザインを依頼しても困るし、WebデザイナーさんにDTPのデザインを依頼しても、印刷の段階でいろいろ問題が発生します。似ているようで結構違うんです。

ココが違う1 使える色・解像度

以前ブログの記事で書いたこともありますが、ホームページはモニター(画面)で閲覧。DTPは印刷物です。モニターは光で色を表現するので、鮮やかな色の発色もよく、パールカラーの色も再現しやすいです。一方DTPはインクを混ぜて色の表現をするので、淡い色の表現が苦手だったりします。Webデザイナーは普段RGBカラーでデザイン、DTPデザイナーはCMYKカラーを使用するので、完成データのカラーモードがそもそも違います。
また画像のきめ細やかさを示す「解像度」。これもWebとDTPではかなり異なります。

ココが違う2 サイズ

DTP(紙面)の場合。完成された時のサイズは決まっています。A4サイズ、B4サイズと先にサイズが決定していて、その中にパーツを配置していきます。デザイナーはそのレイアウトを上手く配置し、目に留まるデザイン、見てもらえる内容に仕上げていきます。それに対しWebは…仕上がりのサイズが決まっていません。パソコンのように横長の画面で見ている人もいれば、スマホで閲覧している人は縦長です。画面のサイズがどんな状況であっても綺麗に見えるようなデザインをしなくてはいけません。DTPデザイナーさんは、このサイズが定まらないのにデザインをするというのが難しいようです。逆に、Webデザイナーは普段用紙の中にものを納めなくても、スクロールさせる、クリックしたら別のページというようなデザインもできるため、エリア内に収めることや、印刷で出せる最小の文字サイズや線の太さの感覚が曖昧です。

ココが違う3 自由度

DTPは新聞に入れる、ポスターで貼る、お客様に配るなど、見てもらう人数を先に想定してその枚数印刷します。優れたデザインであることがベストではありますが、少々残念なデザインであっても新聞の折り込み広告として入っていれば見てしまう人もいます。ところがホームページのデザインは、検索でサイトを表示してもらえないことには見られないものです。極端な話しになってしまいますが、優れたデザインであってもSEO(検索対策)が整っていない限り、発掘されないサイトです。そこで、検索>デザインとなってしまうこともあります。例えば、サイトのトップページがおしゃれで1文字の文字もないようなサイトだと、そのぺーじに文字が存在しないとで検索としては評価しにくいサイトになってしまいます。文字をある程度入れて、これを入れると検索上位になるというルールの上でデザインが必要になったりします。自由にデザインするという意味では、Webだと制限がいろいろできてしまいます。

このように、WEBのデザイナーとDTPデザイナー。どちらもIllustratorやPhotoshopで制作は出来ても、デザイナーとして必要な知識やルールがそれぞれ異なっているので、それぞれ専門のデザイナーさんに依頼することをおすすめします。

もちろん弊社ではDTPもWebも知識を持ったデザイナーが所属しています。
どちらもまとめてのご依頼も大歓迎!!!
むしろ同じ会社にお願いしておけば、元データや使ったものを共有しているので制作しやすかったりします。片方しか作ったことはないけれど、Webサイトに興味が出てきた、サイトの更新はしているけどDTPのデザインが必要になったなど、気軽にご相談ください。

静的ページと動的ページって何?

職場内では通じてしまうので、うっかりお客様相手にも使ってしまう用語があります。聞いた方がすぐに「?」という表情をしてくれたり、直接聞いていただければお答えできるのですが、こちら側のニュアンスとして「(当然)知ってますよね?」なんて空気が出ていると、質問されることもなく、相手に伝わっていないまま会話を続けてしまうことも…。

今回はホームページ制作の現場で使われる用語の中から「それってどういうこと?」と時々質問の入るワードについて、専門的な解説ではなく、理解してもらうために極力わかりやすく説明します。

◆静的ページと動的ページ

ホームページを作成する時、どんなページを用意したらいいかの打ち合わせでこのワードを使ったりします。
静的ページというのは文字通り、サイトを表示させるだけのページを示します。一般的なページはほぼ静的ページだと考えてもらえば大丈夫です。私たちのようなコーダーにHTMLを書いてもらい、それをネット上に公開します。変更や修正する部分がある場合には、制作した人に連絡しこの部分を直してほしいと依頼。ネット上にあがってるものをダウンロードして編集したのち、ネット上に上げなおし(上書き)します。

これに対し動的ページというのは、ページを閲覧しに行く度に表示のされ方が一定ではないようなページを示します。例えばトップページに新着情報を設けている場合。新着情報は最新の記事を毎回表示されるようにしています。ランダムで画像を表示したりするのも該当します。またお問合せフォームでも、必須項目に記載がない場合にはエラーを表示させるという指示が出されています。ただ表示させているだけではない部分を「動的要素」というような言い方をし、これを含めるページを動的ページと言います。

静的な作りにする場合には、更新や修正があった場合、弊社に依頼をしていただき、本部や掲載する画像をいただいた状態で作業に入ります。量や内容にもよりますが、作業時間が発生するため、更新するのに料金が発生します。
動的なページで作る場合、お客様が投稿した内容を自動的に読み込むようにサイトを作ります。更新も修正もお客様にやってもらうような作り方です。上記がHTMLで作成するのに対し、動的なページはPHPで制作したりします。ホームページの作り方が全く異なります。その為、打ち合わせをさせていただく段階で、どのようにページを使うのかを確認させていただいてます。

ホームページと家づくりは似てる!?

ホームページの制作とは、どんな感じなのか。

全くホームページの知識がない人、ホームページを作ろうとしている人、制作の仕事に携わろうと勉強する人に聞かれた場合、よりわかりやすく説明する為、「家を建てる」のを例に挙げて説明することがあります。
家の購入は高額なるため、かなり慎重に検討すると思います。ところがホームページに関して…作る手順は家と同じような作り方をするのですが、検討があまりされないまま依頼される方も少なくありません。家のように一生に1回の買い物では無いかもしれませんが、ホームページは家よりも他者に見てもらうもの。より完成度の高いサイトを作るためには、家を建てる時と同じように、しっかりと検討することが重要です。

ということで、今回は手抜きをするとどんなことになるのか!
家の購入に例えながら、簡単に紹介しようと思います。

 

◆土地の購入/サーバの選択
ホームページを公開するために、自社サーバーで作るのか、レンタルサーバーの場合はどこの会社のどのプランが適しているのかを調べます。家を建てようと思った場合、近くにどんな施設があるのか、住み心地はいいのか、購入しようとしている場所について事前に調べたりする人が多いと思います。これと同じように、ホームページも公開する場所によって特色があり、データ量の制限、サーバーの仕様、サポートの有無など、どんなホームページを作るのか(どんな家を建てるのか)によって、適している場所があります。どんな家を建てる予定か、決まっていなくても土地は購入できますが、購入した土地ではやりたいことができない、家を建ててから住みにくかった…ということを防げます。

◆設計・デザイン
「土地を購入・サーバー」の確保ができたら、そこに建てる「家・ホームページ」の設計をします。上記で書いたように、確保した場所によって、土地の広さや景観についての制限など、全く自由に設計・デザインができるわではありません。できることの範囲内で設計・デザインをしていきます。部屋はいくつ必要なのか、駐車場のスペースは何台分なのか、キッチンの場所はここで大丈夫なのか?など。また2階建ての場合、2階にトイレは必要か?ホームページも家づくりと同じで、どれくらいのページが必要なのか、このページのメニューボタンはどこに配置するべきなのかを考えます。設計をする際、これを適当に考えてしまうと、見てほしいページのボタンが見つかりにくかったり(陽の入らない部屋を作ってしまうような感じ)、家具を入れたら思っていた以上に狭い部屋になってしまったなど、住みにくい家、見にくいサイトになってしまいます。
希望、要望をデザインに反映させてみて、施工が難しい場所、修正が必要そうな場所、あった方が良いものなどをお客様にお伝えし、デザインを決定させます。

◆建設工事・コーディング
設計図を元に、家を建てる作業に入っていきます。私はコーディングの仕事を中心にさせてもらうことが多いので、少し細かく内容を説明します。コーディングは設計図を元に何も考えずコードを記述していくこともありますが、将来的にこれが必要になるかも…、昔はこのやり方だったけど現在はこちらの素材の方が有効的…など、見た目のデザインではない部分も検討しながら作っていきます。家で例える、断熱材や土台など目に見えない部分の内容です。今までの打ち合わせ内容を確認し、現状できること、今後ありえそうなこと、やっておいた方がいいことを考えた上で制作をしていきます。ただ作るだけの場合、増改築が難しくなったり、耐久面(サイトの寿命)としても長いとは言えません
この作業まで入ってしまうと、デザインの変更やページの追加が難しくなってきます。

◆電気、ガス、水道工事・プログラミング
生活するのに必要な業者に入ってもらい、使えるようにしてもらう作業です。ホームページでいうと、お問い合わせフォームやブログ機能だったりします。工事を行っていないと、絵的には完成しているように見えますが、ボタンを押しても動作しないという状況です。1つ前の段階で、変更できない部分が多くなってきますが、プログラムも同じで、お問い合わせフォームに必要な内容など、しっかり決定しておかないとその後の変更・工事は別途費用がかかってしまったり、納期が遅れる原因にもなります。

◆届け出・SEO登録
完成したら住所や名義など、役所に届ける内容がいくつかあると思います。それと同じようにホームページもサイトを作って公開しましたという報告を、検索サイトにします。

 

手順としては、このような形でホームページも制作公開をしています。
完成後、作ったサイトの写真を差し替える、文章の変更などは、畳や障子の貼り換え作業のようなものなので、あまり時間をかけずに対応できるように設計・建築をしてあるのですが、2階にも浴室を追加してほしい………ともなると当初の設計には無い部分なので、かなり無理のあるリフォームになってしまうこともあります。

せっかくお金をかけて作るホームページ。よくわからない、面倒とは思わずに、検討・ご相談いただいて、少しでも多くの人に利用しやすと思ってもらえるサイトにしていただきたいです!

「美人」や「かっこいい」は曖昧な誉め言葉

友人から「凄い美人を紹介する!」と言われ、
期待をしていたら美人というよりは個性的な人だった。

とてもカッコイイ人と聞いていたのに、そうでもないなぁ~。

…ということありませんか?
このやり取り…合コンの裏話しとしてよくある会話なんだそうです(苦笑)

「美人」「カッコイイ」というのは誉め言葉として共通していても、その感覚は人それぞれ。ある程度の方向性は予測はできたとしても、必ずしも共通した認識にはなりません。この誤差を埋めるキーワードとしては「例えば誰に似てる?」これを聞いておけば自分の考える「美人」「カッコイイ」から外れていたとしても人物の想像ができます。

この曖昧な表現。人物に対してだけではなく、印刷物やホームページのデザインの現場でもよく使われます。

・キレイ ・エレガント ・クール ・シンプル ・シンプル ・豪華 
・にぎやか ・華やか ・ポップ ・ゴージャス ・優しい など

仕上がりのイメージを伝える際、上記のようなワードを使いますよね。

「綺麗な感じで!」と注文があった場合。

デザイナーはこの単語を元に、比較的狙ったターゲットの多くが「綺麗」と思えるようなデザインを考えていきます。デザイナーはイメージワードが一つだけだったとしても、それに沿ったデザインを制作可能ですが、冒頭で書いた「美人」「カッコイイ」と同様に、感覚の差を極力埋めたい場合には、自分が思っている「綺麗」を伝えるとよりイメージに近いものをデザインすることができます。また、何回か注文を繰り返しいただくと、お客様の好みや傾向がわかるので、修正作業も徐々に少なくなっていきます。もちろん、デザインに自信がない場合や、デザイナーの感覚が1番!!と思ってくださる場合には「綺麗な感じで!」だけの言葉でもOKです。

打ち合わせの現場で「例えばどんな感じですか?」と言われた時。

え?他のを参考にするの???と不審に思わず「感覚の差を無くす作業をしたいんだな」と、受けとめていただけると嬉しいです。

text-shadowで文字装飾

サイト閲覧ユーザー数ががパソコンからスマホにあたり…。以前は目立たせるためにも画像で作っていた見出しやタイトルをコーディングで作ることが多くなってきました。理由としては、画像を表示させるスピードよりも、文字の方が早いためサイト評価が高くなることや、スマホ・PCサイトと共通した画像を使う場合、PCでは読めるサイズで作ってもスマホでは読めない部分が出てきてしまうためです。
画像ではなく文章でタイトルが打ってあれば、改行位置や文字の折り返し市が変わったとしても読んでもらうことが可能です。読んでもらうことを目的としていますが、装飾がないと重要なポイントを目立たせることができません。
そこで、今回はいろいろやってみた、文字の装飾です。

これを見本に、文字の見せ方をいろいろカスタマイズしてみます。フォントサイズは25pxです。

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

同じフォントサイズの明朝です。止め・ハネ・線の強弱が出るので繊細な印象になります。
強弱が出るということは…文字サイズが小さくなった場合、読みにくくなる時もあります。
10pxの明朝は、明朝感が…

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
フォントサイズを最小の10pxにしています。
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
フォントサイズを最小の10pxにしています。

太文字にする指示を追加しました。綺麗に見えているでしょうか?
太文字にしたら書体が整って見えなくなるということが…日本語フォントの場合はよくあります。アルファベットに比べ文字数が多く、また画数も多いため、縦横斜めをすべて同じように太くすると文字が認識できなくなってしまうものもあります。そのため、1角ずつ線の太さが異なったりして、バランスが悪くなってしまうことも…。

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

文字に影をつけます。影を付ける指示は「text-shadow」を使います。「text-shadow:左右 上下 ぼかし具合 色;」という形で指示が出せます。
左右は元の場所を起点として、右がプラス・左がマイナス。
上下は元の場所を起点として、下がプラス・上がマイナス。
ぼかしは0~のピクセルで指定。色はコードでもRGB値でも入力可能です。濃度の調整をすることも多いので、個人的にはRGBAで入力していることが多いです。

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

上記のtext-shadowをふまえて………。
弊社のデザイナーさんと打ち合わせの際、文字の装飾がどこまでコーディングで表現できるかという話しになりました。上にあるような作業は頻繁に使うので実装しているものもあるのですが、やれるかどうか試してみよう!ということで、text-shadowを駆使して使えそうなものから使えなさそうなものまで、チャレンジした記録です!

囲い文字にチャレンジ。 1pxずつ上下左右にぼかしのない赤の影(ぼけてないので線ですが…)を実装

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

線を太くできないかということで…1pxのズレを5pxに変更したら…とんでもないことに!

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

ぼかしながら使えば、不安を煽るような文字効果としては使えなくも…ないかも?

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

囲えるなら、文字の色を背景色にして抜き文字もできるだろ!とチャレンジ。黒背景の方はいい感じに見えますが、右側は危うい気がします…

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

影は何枚でもつけることが可能で、それぞれ色やずれ方を指定できます

浜松市・掛川市の
ホームページ制作
会社有限会社メルシー
浜松市・掛川市の
ホームページ制作
会社有限会社メルシー

影の位置、ぼかし方、背景の色、フォントの色などを組み合わせていけば、いろいろな文字装飾ができそうです。(綺麗に読ませることができるかは別として)画像に頼らずコーディングでタイトルを作っていくと単調になりやすいので、チャレンジをして使えそうなデザインを増やしていきたいです!

何が原因??あなたは文字化けする文字を知ってますか?

メールの送受信をした際、届いたメールの一部が文字化けしていたり、

圧縮ファイルを解凍したら読めない文字の羅列なってしまったりしていたことはありませんか?

友達同士や社内であればあまり気にせず使っていることもありますが、

お取引先への連絡や、失礼があってはいけない人に文字化けした内容を送らないように、

送信する側からある程度の対策をとることが可能です。

文字化けの原因は1つだけではなく、いくつかの原因が考えられます。

その中でもよくある原因の一つに 機種依存文字 があります。

その名の通り、機種に依存した文字・記号なので、別機種のパソコンで正しく表示することが困難という現象です。

WindowsとMacがこの関係にあたります。

Windowsで丸に囲まれた数字(記号)、まるいち、まるに、まるさん………と入力して送信すると

Macで受け取った場合はローマ数字 I、II、III となって相手に届きます。

どちらも数字なので、意味合い的には同じになりますが、例えばお互いに自分のパソコンを見ながら

電話で打ち合わせをしていた場合「丸2の件に関して…」と言うと、それが通じなかったりします。

数字の他にも(株)や(有)、単位なども機種依存文字に該当します。

社名の前にこれらの文字を入力する場合、機種依存文字にならないよう、

括弧と漢字で表記するように気を付けてください。

機種依存文字については、どの文字が文字化けするかをリストアップしているサイトもあるので

相手に失礼がないように、そしてパソコンの知識がない人と思われないためにも

是非検索で調べて、確認してみてください。