jdash 2000 site

DTP・Web制作・CSS・マーケティング・スマートフォン・印刷などの色んなものに四苦八苦しながら次なる営業展開を考える営業部所属の人のブログ



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


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

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

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


●@adobe_forums_dtpとは

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

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


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


記事の続きを読む




みなさん、ニュース閲覧アプリの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とのことだそうです。動作原理は簡単でしたね。


記事の続きを読む




ブログ著者

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

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

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

ブログ著者について

サイト内検索