2014年10月の記事一覧



mtブランドの竹の定規とプラの定規を模した模様が入ったマスキングテープについて、ブログで以前書きました。


もちろん、あのエントリーを書いてアップする前にきちんと買いましたよ。

証拠の写真。

20141030-iPhone5sで10cmを測る-02


ということで、この定規のマスキングテープを使っていたら偶然気がついたことを紹介します。

タイトルにもあるように「iPhone 5sで10cmを瞬時に測る方法」です。


それでは、どうやって瞬時に10cmを測るかをご覧下さい。

記事の続きを読む




20141024-アドビフォーラムの書き込みをツイート-01


アイコンは変えるかもしれんけど。

ということで、10日前くらいに @adobe_forums_dtp というTwitterアカウントを作りました。動いています。

DTP関係者なら迷わずフォローしたまえ。


●@adobe_forums_dtpとは

どういうアカウントかというと、まずはアドビシステムズとは無関係のTwitterアカウント、つまり勝手アカウントなのでご理解を。

ツイート(つぶやく)内容は、アドビフォーラム(Adobe Forum) でIllustrator・Photoshop・InDesign・Acrobatカテゴリーの新規書き込みのタイトルと書き込みの先頭数十文字と書き込みへのリンクです。


こんな感じのツイートをします。


記事の続きを読む



20160101-SmartNews-アイコン-02

みなさん、ニュース閲覧アプリのSmartNews(スマートニュース)を使っていますか? 私は頻繁に使っています!


さて、TwitterでSmartNewsのアイコンの変遷がおもしろいというものが流れてきました。


確かにおもしろいので、時系列順に見てみましょう。


●SmartNews以前

まずはSmartNewsになる前(笑)。「NEWSどうぞ」というアプリ名(の予定)だったのですね。

アイコンデザインを見てみると、カラーで分けられたNEWSのイメージが表現されているのだと思いますが、文字の置き方が適当過ぎる。せめて「どうぞ」はそれぞれのカラーのセンターに来るように置こうよ。「ぞ」だけ左に寄っているように見えてしまいます。

20141022-SmartNewsアイコンの変化・変遷-01

画像出典:SmartNewsのUI/UXエンジニアが語る!「iPhoneの画面サイズと室町時代の違い棚」 (Find Job ! Startup)



●SmartNewsリリース直前

そんなイケてないアイコンを作り直したのが、dot-ai, Vol.1「超絶アピアランス祭り」で講師だった、あの「鈴木 ともひろ」さんです。

アイコンデザインはニュースペーパー(新聞)らしいデザインに、仕分けされたカラーの付箋のようなものが付いていて、ニュースをただ流すのではなく、編集している(ピックアップしている)ということが表現されているのだと思います。

20141022-SmartNewsアイコンの変化・変遷-02

画像出典:SmartNewsのUI/UXエンジニアが語る!「iPhoneの画面サイズと室町時代の違い棚」 (Find Job ! Startup)


なお、SmartNewsの初期のアイコンの納期はなんと3日!(汗) 超短納期ですね…。(2014/10/22追記)

その当時、「SmartNews」のアプリ開発は難航していました。アプリの申請をする1ヶ月前に、ようやくユーザーテストに漕ぎつけたのですが、期待した結果に至らず、急遽メインアイコンや名前を変更することになりました。

時間がない中で思いついたのが、ランサーズに依頼することでした。その時は、依頼期間わずか3日だったのですが、魅力的な提案が次々と集まりました。

あと1ヶ月しかない!?クラウドソーシングでピンチを脱した「SmartNews」リリース秘話 | Lancersマガジン
記事の続きを読む



20141021-Googleウェブマスターツール-サイトマップとRSS-01


サイト作成者にとってGoogleの検索結果に表示されることは非常に重要なことのひとつです。

そのためには作成したコンテンツをGoogleに発見してもらわなければいけないのですが(いわゆるSEOのひとつです)、Googleは「Googleウェブマスターツール」というページで管理しているページの登録などを行うことができます。


さて、そのGoogleウェブマスターツールですが、「クロール」という項目の「サイトマップ」の項目でサイトマップ(sitemap.xml)(以下XMLサイトマップ)やRSS・Atomなどのフィードを登録することができます。この項目は「サイトで登録すれば良いページのリスト」を登録するわけです。そうすると、Googleが効率よくページを登録できますし、更新情報をいち早くGoogleに知らせることができます。

20141021-Googleウェブマスターツール-サイトマップとRSS-03


このサイトマップの項目にはXMLで記述されたページの一覧であるXMLサイトマップとRSS・Atomのフィードが登録できますが、どちらの形式を登録すべきなのでしょうか?

記事の続きを読む



レスポンシブwebデザインとは、ひとつのHTMLソースから、スマートフォンやPCなど複数のデバイスへ対応することですが、レスポンシブwebデザインのウェブサイトを作る上で、非常に強い味方になってくれるのがフレームワークのBootstrap(Twitter Bootstrap)です。

このBootstrapがあれば、誰でもすぐにレスポンシブwebデザインのサイトを作ることができます。



さて、その強力なBootstrapで今回はTipsを紹介。

Tipsは「スマートフォン表示の時だけ改行する」「スマートフォン表示の時だけ○○を表示する」というもの。

それでは実例を見ながら説明しましょう。


●実例「スマートフォン表示の時だけ改行する/○○を表示する」

実例で使うサイトは「グラシン工房」のページ。

スクリーンショットはPCのウェブブラウザーで見た時のものです。トップページの右側にあるサイトの説明文で「スマートフォン表示の時だけ改行する/○○を表示する」という技を使っています。

20141015-BootStrap-Tips-01

画像出典:紙モノ好きの遊び心を刺激するペーパーグッズショップ | グラシン工房


この部分は以下の様な文章が入っていて、実はそのままの状態でスマートフォンで表示すると、文字数の関係で変な所で折り返されたりしてしまいます。

2行目の「グラシンペーパーにパターン柄やイラストをプリントした」などはかなり長いですよね。

20141015-BootStrap-Tips-02

画像出典:紙モノ好きの遊び心を刺激するペーパーグッズショップ | グラシン工房


ひとつのHTMLでPCもスマートフォンもお手軽にキレイに表示したいので、スマートフォンで表示した時だけ改行を多く増やしたいわけです。

実際のサイトをスマートフォンで見た時には以下の様に表示されており、PCのウェブブラウザーで見た時よりも改行が多く入っています。(縦に長いという指摘は今回はご勘弁下さい)

20141015-BootStrap-Tips-03

20141015-BootStrap-Tips-04

画像出典:紙モノ好きの遊び心を刺激するペーパーグッズショップ | グラシン工房


それでは、ソースを見てみましょう。

記事の続きを読む



というわけで、はてなブログは使っていなくてはてなダイアリーしか開設していない私ですが、はてなのブログカードって「お、これいいな〜」と思っていたのですよ。


はてなのブログカードとは、以下の画像で見える、記事のタイトルと概要とスクリーンショット(またはイメージ)がコンパクトにまとめて紹介できるものです。

20141009-はてなブログカードを他のブログサービスで使う-01

画像出典:はてなブログの記事を紹介しやすくしました。URLを貼るだけで、コンパクトに整ったブログカードを貼り付けることができます【追記あり】(はてなブログ開発ブログ)


ただ、開発日記を見てみると、この機能を他のブログサービス、例えばライブドアブログやMovable Typeなどで使おうとするとちょっと敷居が高いように思えました。なんですか、oEmbedって…。(詳しくは→はてなブログoEmbed APIを公開しました。ブログカードの情報をAPIで取得できます(開発者向け)(はてなブログ開発ブログ))


●ブログカードは他のサービスでは手軽に使えないと思ったら

他のブログサービスでは手軽に使えないのか…残念!と思っていたら、こんなブログ記事が!

このページを読むと、iframeのsrcに「http://hatenablog.com/embed?url=《表示したいアドレス》」と書けばOKとのことだそうです。動作原理は簡単でしたね。


記事の続きを読む



もう半年も前の話で恐縮なのですが、これは良いなと思ったものを紹介し忘れていたので紹介。

商品をネットで買って、そのショップから来るメールってのは大抵は売り込みのメールだったりして、あんまり読みませんよね?

でも、ショップから来るメールでこんなメールなら嬉しいかも。それがこちら。

カメラのキタムラのネットショップでデジタルカメラを購入して11ヵ月が経った時に届いたメールです。

▲▲▲▲▲▲▲▲▲▲▲様

--------------------------------------------------------------------------
本メールは、当店にて商品をご購入後1年を迎えるお客様にお送りしております
保証書のない商品をお買上げのお客様にもお送りしておりますのでご了承下さいませ
--------------------------------------------------------------------------
□対象の注文
注文日:2013年03月06日
ご購入商品:
キヤノン PowerShot S110 ブラック
--------------------------------------------------------------------------

キタムラネットショップです。
昨年は、当店をご利用いただき誠にありがとうございます。

ご購入からまもなく1年となりますが、商品の調子はいかがでしょうか?
メーカー保証が終了する前に、商品のご確認をお勧めいたします。


□メーカー保証書の有効期限をご確認ください
 保証期間を過ぎますと、自然故障の修理代金もお客様のご負担となります。


■故障時の修理に関しまして
(1)カメラ、レンズの場合
最寄りのカメラのキタムラ店頭、またはオンライン修理をご利用ください。

(2)大型家財、家電の場合
メーカーサポート窓口、または最寄りの家電量販店をご利用下さい。

メーカー保証期間中の「自然故障」に関しましては、お近くの取扱店でも「保証」が
受けられます。

▼オンライン修理窓口
http://shop.kitamura.jp/files/syuuri/index.html

−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

【ご注意下さい】

メーカー保証修理をご利用の場合は、付属のメーカー保証書が必要です

−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−


++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
■お問合せの際には「注文番号」をお知らせください
注文番号:▲▲▲▲▲▲▲▲▲▲▲
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
---------------------------------------------------------------------------
キタムラネットショップ http://shop.kitamura.jp/
・電話番号 050-3155-4111(10時〜19時)
《運営会社》 株式会社キタムラ
・住  所 〒761-0102 香川県高松市新田町甲 35−2
・営業時間 月曜日〜土曜日:10:00〜19:00
      日曜日:発送業務のみ ※コールセンター定休日
-------------------------------------------------------------------ktmr


なかなか気が利いていると思いませんか?

記事の続きを読む



Yahoo!の検索結果はGoogleと同じものが出てくるとよく言われていますが、広告周りや検索結果に挟んでくる自社サービスへの誘導などはかなり違います。

今回は、そんなYahoo!独自の検索連動型広告の話


Yahoo!の検索にて「損保ジャパン日本興亜」と検索したら、次のような結果が出てきました。

20141003-Yahoo-損保ジャパン日本興亜の検索-01

画像出典:「損保ジャパン日本興亜」の検索結果(Yahoo!検索)


ばばーんと、「損保ジャパン日本興亜」のバナーが表示されました!

そのサイズは492×277ピクセル!

結構大きなサイズで表示され、通常の検索連動型広告(下地が黄色くなっている部分)よりも上位に表示されています。

記事の続きを読む




ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索