Blog

ホームページ制作業務にまつわるアレコレ

ホームページ制作のアレ

デザインが負の方向に働く危険性

2014/06/09

商業デザインとは、「その商品をより売る(広告デザイン)」「その商品をより便利に使えるようにする(機能デザイン)」ためにあります。
が、上記の力を持つという事は、逆にデザインを間違えると負の方向に働く危険性があります。

http://labaq.com/archives/51827470.html

こちらの記事を見て驚いたのですが、通常ならばジュースと間違えないであろう液体洗剤が、見事にジュースに見えてしまいます。
中央に「BakingSoda」という字が書いてありますが、その単語の意味がわからない子供相手には危険ですね。

では「フルーツの香りの洗剤という事をアピールしたい」「でもジュースと間違われたくない」場合、どうすれば良いか。
文字で書くのは上記の通り、主に誤飲を起こしそうな対象に対して危険性がぬぐえませんので…
■ラベルに洗濯物を描く
■ボトルキャップとTシャツの形にする
■ボトルの体積(重量)を増やし、粘り気を増す(コップに注いで飲まなければいけないようにし、注ぐ時点で粘り気で違和感に気づかせる)
あたりでいかがでしょうか。


カテゴリ:その他

背景画像をブラウザ枠の幅一杯に拡大・縮小する

2014/05/19

リニューアルから数ヶ月経ちますので、TOPの背景画像を変更してみました。
元々、TOPのイメージを大きく変えるには画像の差し替えが一番、しかしその上のメニュー等の色調整は面倒、という事で、今回のデザインでは、上から
メニュー等部品
メインコンテンツ部分
差し替えが利く画像のスタイル
背景(ここがアニメーションしている)
の順で優先度を振って重ねてあります。

さて、背景の画像ですが、基本的にあまりでかい画像は使いたくない、という事で、
横幅1280pixel程度とし、それを背景にあて、
background-size:cover
というプロパティで枠にフィットさせています。
このプロパティにより、要素の枠内に画像の辺がぴったりくっつくように拡大・縮小してくれます。しかも縦横比はそのまま(はみだした部分はオートで切ってくれる)キープしてくれるので、レスポンシブデザインにはぴったりです。
display:table-cellと並んで、激しく使うcss3要素の一つです。

そこから更に、opacityで要素全体の透明度を強制的に下げ、背景の色変化アニメーションをわずかに透かしてみせることで、時間と共に色が微妙に変化するようになっています。

…できたら上記のような方法ではなく、ずばり背景の上に画像要素を乗算したいのですが、今のcssでは正式にそちらの方法に対応していません。
是非、background-blend-mode を正式に実装して頂きたいものです。


カテゴリ:ホームページ制作

またOPENSSLに脆弱性が見つかったそうです。

2014/05/08

今度は、トラップサイトでログイン動作をした時のみ発生するという事で、危険性でいえば自分が何もしなくても問答無用でIDやPassを抜かれる可能性のあったHeartbleedよりずっと下、というか最近ではもう「よくある危険度の脆弱性」といってしまっていいレベルのものです。(こんなのがよくあるケースとか、嫌な話ですね。)
詳細は元記事をどうぞ
http://www.appps.jp/88572/

今回のキーとなるのはOpenIDで、最近よくみかける「googleアカウントでログイン」とか「FacebookIDでログイン」的な仕組みの不備を突いたもののようです。
ただし、たとえ上記のリンクをうっかり押してしまったとしても、「アプリを許可するよう求められ」るとの事で、正しい動作であればいちいちこんなメッセージはでませんので(よく連動アプリを使う方ならおわかりかと思いますが、アプリの認証がはいるのは普通初回だけです)、そうそうひっかかる方はいないかと思います。
可能性はあるよ、程度の話ですが、注意するにこした事はありませんね。

ちなみに弊社では「面倒くさい事こそ最大のセキュリティだ」というモットーのもと、OpenIDもオンラインパスワード管理ツールもつかわず、しかも全てのサービスでIDとパスワードをバラバラにして管理しています。
本気で面倒くさいですハイ。


カテゴリ:その他

SEO会社を選ぶとき、最低限気にしておきたいこと

2014/05/07

弊社は自社ではSEOの外部施策を行っておらず、ご要望があった場合はSEO会社をご紹介する形になります。

さて、弊社がSEO会社を選定するとき、最低限、これを守っていない会社は絶対に使用してはいけない、というラインがあります。
それは
(1)「どこにリンクをはるか」を明らかにする事
(2)「どういう施策をしたか」をこちらに作業書として文面で公開する事。
企業秘密等を理由に上記を一部でも公開しない会社は、利用しない事をお奨めいたします。検索で上位にあがるどころか、逆にペナルティを被る可能性だってあります。

標的になったブログには大変恐縮ですが、一例をあげさせて頂きます。
昨今ではGoogleのリンク分析もかなり精度が上がってきましたので、ブログ、SNS等で一般ユーザーが製品/サービスを善意で取り上げてくれる「ナチュラルリンク」が有望であるとされています。が、
例えば「弊社では○○個のブログからナチュラルリンクを獲得できますよ」的な話で、そのブログのURLを教えてもらえなかった場合、以下のような状況になってしまう可能性があります。

http://blogsearch.longseller.org/w/14375.html

こちらのURLをご覧ください。(かなり極端な例ですが)
見た目一般ユーザーのブログで、URLもバラバラですが、どういう事か素人目にも分かる状況になっています。
これで何らかのペナルティが将来に向っても無い、と考えるほうが無理があります。

SEOは「秘密のノウハウで稼ぐ」ものではなく、「ノウハウは簡単だが、実施するには手間と時間とコネがかかるので、それを代行するもの」です。
ですので、一部/全体をブラックボックス化するSEO企業は、信頼なさらないほうが宜しいかと思います。


カテゴリ:ホームページ制作

全席電源ありっぽい大宮のカフェ「PIER’S CAFE」

2014/04/30

おいおい、突然デザインとまるで関係ない話かよ、と思われるかもしれませんが、今回は99%関係ありません。
ですが弊社の地元大宮関係の話です。

前々から言ってみたいな…と思っていた「PIER’S CAFE」にいってみました。
場所は東口のKFCがあったところ。googlemapのストリートビューだといまだにKFCの写真が残っていたりしますので(4/29時点)分かりやすいかもしれませんね。

「ベーカリーカフェ」と堂々と謳っているとおり、カウンター前にはパンが並んでいます。
置いてあるパン籠の数から、10種類前後+サンドウィッチのラインナップと思われます。
ちょうど入店したときに「焼きたてです」といって新しいパンがでてきましたので、店内に調理設備がある可能性もあります。

このカフェの特徴的な点は2つ。
(1)見た限り全席に電源がついていること。
電源があるカフェは今では珍しくありませんが(秋葉原のヨドバシ前のMacとか重宝します)このカフェ、2人席にも電源がついています。
そのせいか、ノートPCを広げている人を複数みかけました。
充電器を持ち歩いている人なら、一息いれながら充電できてよいかもしれません。
(ちなみにフリーwifiがあるかどうかは不明です。弊社のポリシーとして、フリーLANは絶対使わない事にしていますので確かめていないのです)
騒音のレベルもかなり低いので、2人でしたら打ち合わせにも良いかと思います。
※今回入ったのは2階席ですが、2人かけ以上のテーブルはなかったため、3人以上には向いていないと思われます。

(2)パンが本気でおいしい事。
実はショッピングモール等のベーカリー巡りが趣味の一つだったりしますが、今回食べたチーズとベーコンをデニッシュ生地で巻いたパンは、かなり上位に食い込む美味しさでした。
なおもうひとつ「クイニーアマンシュー」を食べてみたのですが、
こちらは女性の方及び胃の弱い方はご注意かもしれません。
軽そうな見た目に反して、中身のクリームの量が半端ではありません。
食べる時はある意味覚悟がいりそうです。

たまにはこういったブログもいかがでしょうか…?
これからも大宮・さいたま関連のネタは時折書いてみたいと思います。


カテゴリ:大宮・さいたま

「無添加」は安心なのか?

2014/04/28

おいおい、突然デザインとまるで関係ない話かよ、と思われるかもしれませんが、ちゃんと関係があります。

ノンシリコンシャンプーは安物成分でぼったくり?シリコン悪玉論、無添加礼賛のウソ」という記事を読んでおりましたら、最後のほうに
「無添加という魔法の言葉」というくだりがありました。

前々から思っていたのですが、「無添加=絶対安全」であったり「天然由来の成分=絶対安全」「オーガニック=絶対安全」であったりすることはありません。(無論その逆でもなく、「時と場合による」という、にえきらない状態こそが事実です。)
専門的な知識がなくとも、調べればその事がわかります。

で、なにがデザインと関係あるん?て話ですが…
「こういった売り方、こういうデザインもあるんだなあ」と改めて思ってしまった、という話です。

デザインとは何か…一般的には「かっこいい見た目を作る=デザイン」と思われているかもしれませんが、
少なくとも私達の仕事であるアド(広告)デザインの分野では、
「その商品なりサービスをより売れるようにするための戦術・提案」=「デザイン」です。
極端な話、その商品なりサービスがより売れるのであれば、通常レベルより逆にかっこわるい見た目になっても、それは優れたデザインである、と言えます。

さて、デザインは何も「見た目」だけには留まりません。
キャッチコピーを含む「言葉」の分野、いわゆるコピーライターさんのテリトリーもやはり「デザイン」の一種です。

実は私達アドデザインの人間も(自分の体験のみの話ですので全てそうとは言い切れませんが)、コピーライティングの修練は積んでいます。広告に於いてビジュアル・グラフィックとキャッチコピーは切り離せないためです。
共に「ものを売る」ためには欠かせない要素であり、弊社がお客様のご要望に応じて、ホームページの原稿の下書きをさせて頂いているのも、客目線で「こういう情報が欲しい、こういうところから買いたい」というソースが売るために不可欠であるためです。

ですがやはり、専門のライターはすごいな…と関心してしまうのは、上記のような
「無添加」や「天然由来」などの言葉に、その商品をより売れるようにする「概念」を付け加える事に成功しているからです。
言葉の技術といいますか、すごいと思います。

最も、弊社の姿勢としては「それが本当に優れている」と言えるポイントをアピールする、という売り方をしたいと思っています。


カテゴリ:その他

眼底検査のため臨時休業いたします

2014/04/25

すでに当日要件がはいる可能性のあるお客様にはお伝えしてありますが、5月1日は眼科健診のため、臨時休業とさせて頂きます。

私達デザイナーは、売っているものは自分の知識・アイデア・そして時間であり、「原材料」等がほとんど必要ない業種です。
機材も、必要データは常にバックアップを取ってありますので、壊れたらそのへんのショップで新しいPCを買ってくれば応急に業務を続けることができます。

となると唯一絶対にメンテナンスが必要な資材は「自分の体」、とくに「眼」だけは健康でないと商売になりません。

そんなわけで毎年、健康診断に加え眼科健診を受けているのですが、その中に「眼底検査」という項目があります。
これは瞳孔を薬品で開きっぱなしにして、そこから眼の奥の血管を見る検査なのですが、この検査の準備のための薬品で瞳孔を開きっぱなしにしてしまうと、数時間は元に戻りません。

瞳孔が開きっぱなしの状態というのはどうなるかというと…瞳孔はいわゆるカメラの「ピント」にあたりますので、しばらく、世界が全てピンボケに見えます。しかもやたら回りがまぶしく見えて、サングラスをかけないと眼があけられないくらいになります。
(同業者の方でしたら、「明度+50」「ぼかし-ガウス」を30くらいかけた状態から数時間かけて数値をじわじわ減らす感じ…で分かるかと思います)

そんなわけでして、さすがに仕事になりませんので、臨時でお休みを頂きます。
ご迷惑お掛けいたしますが、ご理解頂けますと幸いです。

なお、眼底検査で診る眼の奥の血管というのは、「体の外から簡単に見られる唯一の動脈」だそうで、動脈硬化等の発見に有効だそうです。
受けた事がない方は、一度検査を受けてみては如何でしょうか。


カテゴリ:その他

あと一歩惜しかった。「note」を試してみた

2014/04/21

先日、「note」というサービスが正式公開されました。
初めて紹介記事を見た時、アオリが「tumblrのような…」という事で興味を惹かれたのですが、
実際さわってみて、実体というか目指すものは違っている、と断言できます。
tumblrは画像、作品など「コレいいよね」といったものを、既存のSNSよりも薄く「無言の共有」ができる仕組みに骨子があり、インフルエンス(拡散する)タイプのシステムですが、noteははっきりと「自分の作品を売る・クリエイター等から作品を買う」事に特化したシステムです。

さて、デザイン制作会社としては「自分の商売に使えるかなコレ?」というのが気になるところですので、
中身も試してみました。

note1

トップです。投稿インターフェイスはtwitterの下にtumblrのメニューくっつけました!感がでています。
ちなみに全体のデザインテイストはモロ好みです。

note2

こちらが長文テキスト投稿画面。バグとかそういうのではありません。
「タイトル」や「本文」のところをクリックすることで文章がかけます。
この次の画面をキャプチャし忘れてしまったのですが(ここが肝心なのに)「公開」ボタンを押すと、
「無料で?それとも有料で?」と聞いてきます。どっちか選ばないと公開されません。「あとで」とかナシです。
このあたりから、いかに「課金」という柱に特化したシステムなのだな、と分かります。

note3

画像の投稿はこんなかんじです。wordpressと同じく、ドラッグ&ドロップですね。
画像には1行コメントがつけられますが、コメントはそれぞれの画像をクリックしないと表示されないようです(一覧状態では画像の題名のみ表示)

note5

ここはちゃんと撮りました。「この画像は○円払えばみられるよー」的な設定が気軽にできます。
ちなみにものすごくアダルトコンテンツに適していそうに思われるかもしれませんが、利用規約でアダルト系は禁止されています。
あと情報商材も、ぼかしではなくはっきり禁止となっています。

note7

つぶやき画面。
これは正直、必要なのかな…とは思いました。運営側によると「クリエイターとFanとのコミニュケーションのためのツール」との事です。
画像も貼れますが、この投稿タイプは課金システムがありません。

で、タイトルに戻って、なにが「あと一歩惜しかった」のかと言いますと、

(1)サービスインしたばかりのサービスに求めるのは酷かもしれませんが、外部連携のAPIがない。
これがないと、WEB屋としてはかなり使い勝手が縛られてしまい、辛いです。

(2)オリジナルドメイン対応をしていない。
これまたサイト構築の一助、としては辛いところですね。できたら自分のドメインに流したいところですし。

(3)検索がない。
そんなあほな、と思われるかもしれませんが、検索ボタンがありません。
もしかしたらどこかにあるかもしれませんが、「探しても見つからなかった」時点で無いのと一緒です。
左上のランダムジャンプボタンと「おすすめユーザー」でランダムにでてくるだけが、クリエイターを探す方法というのは辛いものを感じます。

(4)名前がまずい。
普通、こういったサービスは名前+APIとか名前+使い方とかで検索してハウツーを探すなりするのですが、
「note」は一般名詞すぎて、世界一のサービスにでもならない限り正確に目的にヒットしないのではないかと思われます。

——–
とはいえ、サービスインしたばかりのものですので、(4)以外はこれからの改良に期待したいところです。


カテゴリ:その他

wordpressとtwitterの連携をテスト

2014/04/18

プラグイン「WP to Twitter」を使用してwordpressとtwitterの連携をテストしてみました。
設定方法は
http://www.adminweb.jp/wordpress-plugin/list/index9.html
こちらに載っているのですが、twitterのapiのレイアウトが変更になったらしく、上の記事とやや相違する点があります。
(1)まずAPIの登録時、CAPCHAがなくなっています。
…最近はCAPCHA破りも常態化しているので、無駄だと判断されたのでしょうか…。
(2)続いて「Application Type」の設定ですが、記事ではsettingsタブの下にあると書かれていますが、実際は一番右のタブに独立・移動しています。
(3)アクセストークンの発行は、settingsタブの下に移動したようです。
※うっかりAPIの画面を閉じてしまったので、確かめずに勢いで書いています。
逆にいうとそれくらいで、あとは記事どおりにセッティングが終われば、あとは自動的に投稿した記事をtwitterに転送してくれます。


カテゴリ:wordpress

WordPress3.9が公開されました

2014/04/18

重大なバグフィックスは特に無いようで、画像の投稿方法の改善をメインとしたプラス方向のバージョンアップのようです。
試しに画像をドロップしてみました。
原稿を書く欄にドラッグ&ドロップで投稿できます。
facebookprofile

レンタルサーバ会社によっては、マイナーアップデートは自動で行われたりしますが、今回のはメジャーアップデートですので手動で更新ボタンをポチっと押す必要があります。
現在インストールしたてで検証段階ですが、見た目上では特にインストールしているプラグインで停止してしまいそうなものはなさそうです。


カテゴリ:wordpress
≪ 前のページへ
次のページへ ≫
Web制作のお問い合わせ
Back
follow us in feedly

331-0825 埼玉県さいたま市北区櫛引町2-574-2 アートラボ株式会社