iPhone 6 plus へのWeb最適化の解はないけれど

方向性としては、サイトの想定幅はほかの5インチオーバーのファブレットと同じ。
 
サイズが大きなスマートフォンの画面の問題は、ポートレイトレイアウトとランドスケープレイアウトで、ユーザー側の画面に対する使用目的が多少変わることがあること。
 
縦長と横長で機能面が変わる体験をしたことがある人はそれを期待して端末を横にすることがあり、その欲求に答えることがUXとして必然かどうか検討する余地が生まれていることを制作者は知っておく必要がある。
 
それらを踏まえるとiPhone 6 plusが出た今ではなく、ファブレットという言葉が浸透し始め、5インチサイズが各メーカーからリリースされ始めた1年半~ぐらいにはもう検討を進めないといけなかったかもしれない。
 
iOS端末は日本も世界も売れ筋はさほど変わらないけれど、Androidはまったく変わるのでそのあたりのリサーチや調整は必要。描画周りではIGZOを使ったディスプレイがほかのディスプレイとブラウザーレンダリング上で差異があるのでそのあたりのバグなどにも注意を払う必要がある。

悩むWebデザイナーの年賀状の行く末の対処法

NewImage

デザイナーならきっと年賀状もおしゃれなんだろうと思われてしまう。が、その前にネタに困ってしまうことが多々あるのでその対策。

干支をネタにするとき・・・まずはサンプルを大量にみる。

干支をモチーフにリデザイン?イラストレーション?すると元日に届いたものが激似だったりというのが結構ありがち。

それを防ぐ&よりいいアイディアに導く方法は、大量にみること。普段の仕事と同じで好みや自分の思い描いているアイディアに似たものを探しそこからさらにインスパイアして作り上げる。そのネタ元は年賀状ムックだったり、年賀状ソフトだったり、もしくはスーパーや写真屋さんの年賀状のチラシだったりと大量にあるので仕事帰りなどにお店に寄ってサンプルを拾い集めるのも良い。とにかくまずは数。

それでもネタに困ったときの写真素材サイト。

たとえばfotoliaなどは景色やシルエットなどの素材が豊富にあるので、そこからコラージュなどを進めていくもの方法の一つ。0からではないので、かなりはかどると思います。ただ、明らかにそのままだとあとで自分で後悔するかも・・・

グラフィカルにしたいときなどのアイディア。

単純に色味を替えたり、オブジェクトを増やしたりしてもよいのですが、例えば一度印刷したものをスキャンしたり、カメラで撮って取り込んで違う風合いをだしたり、印刷する紙をかえるものひとつ。

紙を変えるときは年賀切手があるといいのですが、クリスマス頃には売り切れている場合が多いので、そのときは切手+はがきサイズの紙。デザインする際は郵便番号などの枠があるものより、無地のものを買って年賀状ソフトで枠も一緒に印刷した方がズレずにきれいに仕上がります。

また切手を貼って投函する際は切手の下に赤い文字で「年賀」と入れるもの忘れずに。。。。早くついてしまいます。

年賀状+年賀サイト。

仕事でクリスマスのグリーティングメール&サイトを作ったのがきっかけで年賀状+Webサイトという2度手間をここ数年続けています。

Webデザイナーであれば、できれば紙も大事ですが、Webでも自分のスキルやデザインをアピールできるものができると、次の仕事や打ち合わせのネタなどにもなるのでおすすめです。

過去の自分の年賀サイト

2011(停止中) 2012 2013

あとおみくじなどコネタがあると喜んでくれる人が多いです。

自分で印刷するときの注意点

プリンタが既にある場合はインクを多めに用意しておく。またハガキもできれば実際の倍〜ぐらいあるとあとで誤植があったときも対応できます。

縁なし印刷を行う場合は裏面が汚れる場合があるので1〜3枚刷ごとにチェックしてプリンタに用紙裏側をクリーニングする機能がある場合はこまめに行うと用紙を無駄にせずにすみます。

手間はかかりますが、そこから始まるコミュニケーションなどもあるので2014年は年賀状出してみてはいかがでしょうか?

 

  • デザイナーズ年賀状+CD-ROM+2014+―クオリティー抜群のデザイン年賀状の決定版!++フリーフォント50書体!++干支イラスト%2Fレース%2F飾りパーツ%2F飾り罫%2Fハガキ背景などの素材も満載!+―+(インプレスムック)
  • 筆ぐるめ+2014+年賀状++午+[ダウンロード]
  • 2014午年業種別年賀状・賀王forビジネスDVD
  • アジェンダ+宛名職人Ver.20
  • 宛名職人2014+Premium
  • EPSON+PM-A840+マルチフォトカラリオ+インクジェット複合機

linked by blog-tools

Web制作している自分が仕事の時使っているモバイル端末

image

最近よく使っている4端末。

左からiPad mini、GALAXY Note2、Xperia mini、そしてiPhone5。

現在販売されている端末は、ハイスペック、大画面なのですが、ユーザーの中には、まだまだAndroid2.3などの数世代前のものを使っている方もいるので小さなXperia miniも持っています。

GALAXY Note2は、手書きができ、画面が大きいのでメールや画像の確認がし安い端末。

赤字などもラクでキャプチャーを撮って書いて送れるのは、紙いらずですごく使利です。

実はずっとこんなにデカいスマホは、持ち難くていらないと思っていたのでポケットにも収まるこのサイズと機能は、驚きでした。

プライベートではiPhone5なのですが、この先は、ファブレットもアリかな?

レスポンシブWebデザインに対応できるフリーランス、制作会社を紹介するサイトプレオープン

Resportal

まずはプレオープン。掲載してくださる方お待ちしております。

レスポンシブWebデザインやパララックスサイトと言ったキーワードが昨年から話題ですが、検索してもどこが対応してくれるのかわからないと言ったところでお悩みのクライアント様もちらほら見受けるので、この際、まとめてしまえば・・・

と思ったりしたので紹介サイトを立ち上げました。

掲載料とってとかマネタイズについてはまだまだこれからですが、まずは無料で行きたいと思っています。

「こんなの載せて見たいんだけど、いける?」と言ったような要望も出来る限り対応していきます。

何卒、よろしくお願いいたします。

RESPORTAL レスポータル
レスポンシブWebデザインを提供するフリーランス、デザイン制作会社のショーケースサイト

http://resportal.cdbk.net

フリーランスなWebデザイナー、ディレクターが外出先でも困らないためのまとめ

Conference
Creative Commons License photo credit: Incase.

日頃打ち合わせにいくことなどがあるので困ったことなどを踏まえてまとめました。
 

Windowsは必須・・・なので、MacBook Air + Windows(Office)が鉄板

最近スタートアップのセミナーなどに行ってみると、そこにあるのはほとんどMacBook AirかMacBook Pro。しかし、こっちが「Mac」だろうが、クライアントや大半のサービスユーザーになる人々は「Windows」なのでダサかろうが遅かろうがWindowsは必須なのでWindows7とOfficeも入れておく。書類系は相手が再編集する場合はOfficeの形式で、編集されたくないものはPDFにする。VMwareやPallarelsを入れておくとOS X上でWindowsも起動できるのでブラウザー確認などのとき非常に便利になります。
 

Evernoteがイチバン? でもA5サイズ以上のメモパッド・ノート+筆記具も必要。

Evernoteで十分というのが本音のところですが、打ち合わせ中相手がノートパソコンを開いていないときにこちらだけノートで画面を見ながらタイピングではいい打ち合わせにはなりません。
そこで使えるのがA4サイズのSHOTNOTE。対応したスマートフォンがあれば、アプリで撮ってEvernoteに送れます。また、カットできるのでその場で渡したり、パソコンに取り込んだものを捨てたりしやすいのも◎。
 

熱中症対策を

飲料水をできれば常備。午後からこまめに水分をというよりも午前中から多めに意識して水分を摂る。自分は午前中に最低500ml取るようにしてから午後の仕事のペースもよくなりました。
そのほかスプレータイプの冷却剤があると暑くてどうしようもないときにかなり使えます。
 

仕事で使うデータはまとめてバックアップ

出先で「あのデータありますか?」と聞かれて、すぐに出せる状態にしておくといろんな場面で役に立つことがあります。DropBoxはアカウントで管理しているのでノートとデスクトップに入れておけば、自分で消さない限り、2つの端末にデータがあることになり、いざというときにバックアップになってくれます。自分はそれに加えPogoPlugのバックアップ機能を使い、自宅のディスクにバックアップできるようにして2重でバックアップできるようにしています。

レスポンシブ対応のWebサイトテンプレートまずは1ページから

Webcaps base

レスポンシブに対応したWebサイト、コーポレートサイト向けのテンプレートファイルが探してもなかなか見つからないので試しに自分で作ってみました。

最近は基本LESSで作っているのでLESS版を無料、CSS版もワンコインで取り急ぎ公開です。(Macなのでバイナリデータが無駄にあるかもしれません)

LESSは制作時の時間短縮とファイル自体もCSSと比べかなり軽くなるのでスマートフォン向けのサイトを制作する際、かなり威力を発揮してくれます。

今後バリエーションやページなども増やしていくので、これからレスポンシブをはじめるという方や試してみたい方はぜひ使ってみてください。

cdbk.net CREATIVES ダウンロードページ

 

Web サイトのフォント表示を綺麗にできる「TypeSquare」を導入しました。

hetemlで本日(2012/4/25)より、モリサワフォントをWebサイトで使えるようにする「TypeSquare」のサービスが12月31日まで無料で使えるということでcdbk.net CREATIVES.で早速導入してみました。

下が使用前のサイト(Mac/Chrome)の表示。

Web before

 そして、下がTypeSquare適用後。

使用しているUDフォントによって可読性があがりました。

Web after

Web fontもだいぶ普及してきたのでこういった技術を使い、よりよいサイトを作っていきたいです。

 

仕事・Web制作でスマホ活用×アプリ(Galaxy NEXUS)

Screenshot 2012 04 08 22 50 46Screenshot 2012 04 08 22 50 39

左がホーム画面、右が待ち受け画面。

4.7インチのスマホ、絶対仕事でも活用したいのでこの一週間かなり使い倒した結果、使っているアプリなどをまとめてみました。

連絡を取るときに便利なアプリ

電話はその場でつながらないと意味がないのですが、伝言や迷惑をかけたくないときはIMやSNS×テキスト。仕事仲間とはメール以外となるとほとんどfacebookやSkypeでやることが多く、Skypeはファイル送信もでき、Gmailは数M程度のファイルもやり取りできるので自分は下の3アプリをよく使っています。

Skype
facebook
Gmail

GmailはAndroid4.0でかなりUIや操作感が進化しているので受信時のレスポンス含め、すごく使いやすくなっています。

情報のチェック

通勤時間、仕事前にGoogle ReaderやHootsuiteを使ってニュースやタイムラインをチェックするのが日課。Google Readerにはロイターニュースやはてブ、ブロガーなどを、HootsuiteにはTwitterアカウント、Tweet検索、facebookなどを登録して使っています。

その他、複数のGoogle Calendarを統合管理するためにPocket Informant、天気や落雷情報を調べるためのウェザーニュースタッチ、

Google Reader
Hootsuite
Pocket Informant
乗換案内
ウェザーニュースタッチ

制作物の管理

制作データのバックアップやストレージの代わりにクラウドサービスを使うと確認やチェックが楽になります。 主によく仕事で使うデータをDropBoxに、仕事上のバックアップデータやそれ以外の音楽や映画などのデータ、ファイルサイズが大きなフォントなど保管にpogoplugをといったように用途別で使い分けています。

DropBox
pogoplug

制作物のチェック

スマホに替えた理由はスマホサイトを作るため、検証するためという人も多いんじゃないでしょうか? 確認がスムーズにできるアプリがいろいろあるので自分で探してみるといいかもしれません。

Macで制作、複数のスマホやタブレットで同時に表示を検証できるAdobe shadowは本当に便利。そのほかデスクトップで今見ているタブを共有できるChrome Betaはタブ切り替えなどが簡単で一つ先のスマートフォンブラウジングが体験できます。カメラアプリは何かあった時の状況を保存するときに使っています。

Chrome Beta
Adobe shadow
カメラアプリ
Camera 360 / Instagram / QuickSnap

Nexusを少し便利にする

手前味噌的なアプリ。使い方次第でスマホがもっと使いやすくなります。 HomeCommanderでホームアプリ、ウィジェットアプリ、SPモードメール、Gmailなどをホームボタンをタップする回数で出しわけするようにしています。

Rings Extended
Home Commander

端末を守る

紛失したときに情報が漏えいしないようにしたり、探し出すときに役立つアプリ。 WaveSecureはデータの消去などだけでなく、悲痛な叫び声を出すこともできるので、なかなか効果ありそうです。

McAfee WaveSecure
ドコモあんしんスキャン

会社に勤めていて仕事のデータをやり取りなどするときには就業規則や情報漏洩には特に気をつけ、セキュアな状態でデータのやり取りをすることは鉄則です。

  • GALAXY+NEXUS+Perfect+Manual
  • できるポケット++GALAXY+NEXUS+(できるポケット%2B)
  • ゼロからはじめる+ドコモ+GALAXY+NEXUS+SC-04D+スマートガイド+(ゼロからはじめる )
  • GALAXY+NEXUSオーナーズブック
  • GALAXY+NEXUSスーパーマニュアル―Android4.0対応
  • iBUFFALO+docomo+GALAXY+NEXUS+SC-04D+【絶対気泡ができない】液晶保護フィルム防指紋イージーフィット%2F反射防止タイプ(ブラック)+BSEFSC04DBK
  • 【スタンド機能つき】CAPDASE+docomo+SC-04D+GALAXY+NEXUS+Leather+Case+FlipJacket+BF+%3A+よこ開き+レザーケース+ブラック+WCSGI9250-B001
  • GALAXY+NEXUS+SC-04D用ブラウンレザーデザインケース
  • [正規輸入品]+高耐衝撃!+日本初上陸!+Ballistic+SG+Series+Case+for+GALAXY+NEXUS+docomo+SC-04D+Black%2FBlackバリスティックケース+ドコモ+ギャラクシー+ネクサス+SC-04D+ケース+ブラック
  • 【ストラップホールつき】がうがう!+docomo+GALAXY+NEXUS+SC-04D+Wave+Design+TPU+Case%2C+Solid+Black+ウェーブ・デザイン+ソフトケース%2C+ソリッド・ブラック+I9250-WTPU-11

linked by blog-tools

できればクライアントが関わるデータや原稿は端末にはいれず、最低限のデータなどを取り扱うようにして、何かあったときはリモートで削除できる状態にしておいたほうがいいです。

Webページのテスト表示にDropBoxをつかう

Dropbox

昨年末から本格的にDropBoxを使い始め、Web制作で何かと便利な代物だということに気づいてしばらく、Webページで使うjQueryなどの動作確認にDropBoxのPublicフォルダを活用してみることにしました。

DropBox Automatorというツールを使えば、自動的にアップすることもできるのですが、常に更新されるわけではないので、難しいことは一切せず、デフォルト機能のpublicフォルダに制作しているページと使っているデータ一式をコピペ。あとはコピペしたページを右クリック→DropBox→「パブリックリンクのコピー」。

そしてアドレスバーに貼り付ければ確認することができます。

CSSなどで絶対パスを使っていると同じディレクトリ構成にしないといけないので見れない場合もありますが、jQueryなどでデザイン、レイアウトを整形している場合などに活躍してくれます。

余談ですが、DropBoxに日ごろ入れているのは、

  • 複数の端末で使いたいダウンロードファイル
  • 制作中の制作データ
  • 制作、更新が必要なWebサイトのデータ
  • HTML5ベースのテンプレート(HTML5,js,cssのセット)
  • 外出先で使うこまごまとしたデータや画像(地図やQRコードなど)
  • スマホで使う着信用の音楽データ など

デザインは大画面のデスクトップですることがほとんどですが、コードはラップトップでやることが多くなり、記事のまとめなどはほとんどEvernoteでするようになりました。

Dropbox ×Evernote があれば外出先や移動中でもラップトップがあれば作業できるので重宝しています。ちなみにドコモのスマホユーザーならEvernoteのプレミアムプランが1年間無料で使えます。

http://db.tt/Jcjoz049 このアドレスからDropboxを登録してもらうともれなく2GB+250MBの容量で始めることができるのでこれからという人はぜひ!

2011年のWebデザイン関連ブックマークまとめのまとめ。

2011年のWebデザイン関連で役立ちそうな記事やブックマークを集めたサイトをいくつか見たのでブックマーク的に記事にしました。

今後も見つけ次第、時折更新すると思います。

2011年総まとめ:ウェブ制作に役立つエントリーBest 20(coliss)

2011年・個人的に参考になったWeb制作向けの国内記事リスト(かちびと.net)

2011年よくブックマークされた15のエントリー(Webpark)

ツイッター9月~12月のつぶやき まとめ 9/1 ~ 12/31 2011(Web Design RECIPES)


合間で見つけたので取り急ぎ。

Google Readerにはてブのタグ検索結果を登録しておくとトレンド的な記事はつかみやすいと思います。

このほかにもこんな記事あるよ!といったところはコメントorこの記事のTweetにRTでコメントなどしていただければと思います。

 


WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法


Caps

最近UIが一新され、新たなアプリケーションのインターフェイスを形にして切れた「Twittelator」。

そのインターフェースの中で自分が一番気になった画像表示のエフェクトをjQueryを使ってcdbk.net CREATIVESのshowcaseで形にしました。

使うのはjQuery.js(今回は1.4.2)とイージングのエフェクトを簡単に追加できるjQuery.easing.js(1.3)のみ。

エフェクトを施したい画像を<span class=”jumpin”></span>で囲みcssでdisplay:block,overflow:hiddenを指定。

JavaScriptはjQuery、easingを<head>内に追加したあとに下記を追記。

//初期表示設定
function jumpin_set(){
	$(".jumpin").each(function(){			//指定するクラス
		var img_w = $(this).width();		//デフォルトの画像幅取得
		var img_h = $(this).height();		//デフォルトの画像高取得
		$(this).attr({"data-h":img_h});		//デフォルトの画像高を属性として保存
		$(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},100); //画像の高さを縮小
	});
}

$(document).ready(function(){
	$(window).load(function(){
		setTimeout(function(){
		jumpin_set();
                }, 100);
	});
	$(".jumpin").hover(function(){//マウスオーバー時の動作
		var img_w = $(this).width();
		var img_h = $(this).height();
		var next_h = $(this).attr("data-h");
		if(next_h){
		$(this).animate({opacity:1,"box-shadow":"none",width:img_w,height:next_h},1000,"easeOutElastic");
		$("img",this).animate({height:img_h},100).animate({height:next_h},100);
		$(this).removeAttr("data-h");
		}
	});
	$(".jumpin").mouseout(function(){//マウスアウト時の動作
		var img_w = $(this).width();
		var img_h = $(this).height();
		$(this).attr({"data-h":img_h});
		$(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},1000,"easeOutElastic");
	});
});

サンプルスクリプト

上記でスクリプトやCSSがバッティングしていなければ動作すると思います。

続きを読む “WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法”

Chrome web storeでアプリケーション、OSのあり方は変わる。

使用感はAdobe AIRのような感じですが、Google Chromeがインストールされている端末であれば使えます。

TweetdeckやGmail、GoogleCalendarを試しにインストールして使っています。

エクステンションはブラウジングに付随、アプリケーションは単独のソフトウェアとしての機能を網羅しているような感じ。

今までパソコンにダウンロードしてインストールしてと少し面倒な作業が必要だったものがChromeではインストール+ログインなどで完了、しかも占有している端末全てに。

ChromeOSが待ち遠しいですが、その前から一足早くユーザー体験ができるので気になる方はChromeをはじめて見てはどうでしょうか?