ブログのデザインをスマートフォン、モバイルへの対応のため、コーポレートサイトと揃えました。
ページ読み込み時のローディングなどは特に設けず、シンプルなレスポンシブレイアウトの構造になっています。
タグ: サイト
コーポレートサイトのリニューアルもそろそろ
年末できそうだったデザインから一転、もっとモダンな感じにしようと思い、年が明けてから色々変更。
ようやく公開できる目処がつきました。今月末に公開します。
jQueryをベースにPreloadJSやLessJSでUX周りを、コンテンツをPHPで効率的に作業できるように組み替え、WordPressで管理する方式から一旦変えました。
ニュースサイトなどをiPhoneで効率よくチェック方法
自分の日課の一部なのですが、朝の移動時間などに効率よくニュースなどをチェックするためにやっている方法を紹介。
ブログやニュースサイトはフィードをFeedlyで読む
PCでもスマホでもタブレットでもサクサクフィードをチェックできるFeedlyは、Google Readerに替わって、必要不可欠なものになっています。
友達のブログからロイターやYahooニュースといったニュースサイトまですべてFeedを集約して一度に見れる様にしています。
気になったページはPocketであとから見る
これもPC、スマホなどいろいろなところで使える「あとから読む」ためのサービス。PCではブラウザーのエクステンションでボタンを押すと保存できる様になり、iOSの場合はClippedというアプリを併用するとブラウザーのアドレスバーなどでコピーしたものが自動的にPocketへ転送されます。
Twitterは気になる人たちをリストでグルーピングしてHootsuiteで見る
TweetDeckなども同じような機能を持っているのですが、様々なデバイスでタイムライン毎に表示できるのでこれをつかっています。
例えば、たくさんフォローしていてわかり辛いならリストを作って、ジャンルや関係性で絞ってみたり、フォローしていない人たちのツイートを検索結果から引っ張ってきたりといったことが簡単にできるアプリケーションです。
これがあれば社会情勢のチェックなどもかなりノイズが多いですが出来ます。
上の３つでだいたいの世の中の流れが読み取れ、新聞よりも速くて大量の情報にアクセスできる様になると思います。あとは「自分が何を見るか」それ次第。
サイドメニュー向けのjQueryプラグイン、Sidrをサイトに導入してみました。
スマートフォンでよく見かけるサイドバーが横から出てくる仕掛けが簡単に実装できるSidrをcdbk.net CREATIVESヘ導入しました。
ページ左上の三角形をクリックすると出てくるようにしているのですが、スマートフォンでは動作しない様子。
なのでSafariとAndridブラウザーではページを横にスワイプすることで出るようにしました(Chromeはタブ移動がスワイプのため不可)
WordPressでメニューの中身を出しているためか、動作が不安定でたまに503になるためついでにSuper Cacheも導入。
動作がまだ不安定なところがあるのでしばし、様子見です。
10年前のポートフォリオサイト
学生時代のポートフォリオを見つけたので一部公開。
ドキュメントベースがXHTMLだったり、CSSの書き方が・・・など見ているとこれ一筋で10年生きてることがよくわかりました。
Flashの動きなどを見ていると今と好きな調子は変わらずのようでした。
コーポレートサイトトップにモーションを追加しました。
コーポレートサイトトップを、あまり動きがない状態だったのでモーションを追加して、ファーストビューで少し変化のあるデザインへ改変しました。
サイトのサービス概要ページにパララックスデザインを取り入れました。
今まで「デザイン」としておいていたページをサービス概要ページに変更、パララックスデザインを取り入れ、動きのあるページにしました。
ティザーサイトのようなパララックスメインのレイアウト以外でもイラストやダイアグラムを効果的に見せるためにパララックスを使う機会も今後増えそうです。
レスポンシブWebデザインに対応できるフリーランス、制作会社を紹介するサイトプレオープン
まずはプレオープン。掲載してくださる方お待ちしております。
レスポンシブWebデザインやパララックスサイトと言ったキーワードが昨年から話題ですが、検索してもどこが対応してくれるのかわからないと言ったところでお悩みのクライアント様もちらほら見受けるので、この際、まとめてしまえば・・・
と思ったりしたので紹介サイトを立ち上げました。
掲載料とってとかマネタイズについてはまだまだこれからですが、まずは無料で行きたいと思っています。
「こんなの載せて見たいんだけど、いける？」と言ったような要望も出来る限り対応していきます。
何卒、よろしくお願いいたします。
RESPORTAL レスポータル
レスポンシブWebデザインを提供するフリーランス、デザイン制作会社のショーケースサイト
レスポンシブ対応のWebサイトテンプレートまずは1ページから
レスポンシブに対応したWebサイト、コーポレートサイト向けのテンプレートファイルが探してもなかなか見つからないので試しに自分で作ってみました。
最近は基本LESSで作っているのでLESS版を無料、CSS版もワンコインで取り急ぎ公開です。（Macなのでバイナリデータが無駄にあるかもしれません）
LESSは制作時の時間短縮とファイル自体もCSSと比べかなり軽くなるのでスマートフォン向けのサイトを制作する際、かなり威力を発揮してくれます。
今後バリエーションやページなども増やしていくので、これからレスポンシブをはじめるという方や試してみたい方はぜひ使ってみてください。
アンドロイド端末を買う前、買ったあとに見ておきたいサイト
様々なメーカーから出ているアンドロイド端末。
携帯電話キャリアから出ているものは高スペックで価格も高いため、もっと安く手に入れたいという人や、もっとかっこいいモデルが欲しいという人。
はたまたカスタマイズしたいという人もいると思うので自分がよく見ているサイトを紹介します。
XDA Developers
アンドロイド端末のアプリや改造の情報が数多くあり、たまに発売前のスマートフォンのROMなども公開されているサイト。
日本で市販されている端末はほとんどSIMロック端末なので実際にROMを入れようとするとroot化をする必要があるなど、キャリア、メーカーの保証対象外になってしまう場合がありますが、より自由度の高いOSレベルでのカスタマイズや日本で発売されていない端末のデータなどを見つけることが出来ます。
Amazon
アンドロイド端末は種類が多い反面、iPhoneと比べるとデザインのいいケースなどは量販店でなかなかみつけられません。しかし、グローバルモデルのXperiaシリーズやGALAXYシリーズなどはiPhoneケースを作っているメーカーなどもさまざまな種類のケースを出しているのでAmazonで検索するといいものが見つかったりします。
その他、スマートフォンの白ロムや海外版のSIMフリー端末など端末本体も探すことが出来るので、動作検証用にWifiでといった場合の選択肢として覚えておくと便利です。
Qoo10 (旧G-market)
韓国のネットショッピングサイト。
日本よりもスマートフォンが早くから普及していたり、SAMSUNGやLGなど端末メーカーがあるため、アクセサリーや本体なども検索するといろいろでてきます。アクセサリーなどには偽物もあるみたいなのでその辺りはシリアル番号の有無などでチェックしてみてください。
Expansys
香港発のスマートフォン、タブレットなどの輸入代理店。端末が日本で買うよりもかなり安い価格で手に入れることが出来ます。(別途関税や運送費がかかります)
最近スマートガジェットというカテゴリーが出来、周辺アクセサリーがより充実してきたのでガジェット好きな人へのプレゼント探しなどにも使えます。
linked by blog-tools
サイトの背景を布地ライクなものに変更しました。
今まで一色無地にしていたのですが、少し物足りなさを感じ、最近流行？の布地ライクなものに変更しました。
Gifなどにして色数を減らすことで反復しても違和感のない背景に仕上げることが出来ました。
Web サイトのフォント表示を綺麗にできる「TypeSquare」を導入しました。
hetemlで本日(2012/4/25)より、モリサワフォントをWebサイトで使えるようにする「TypeSquare」のサービスが12月31日まで無料で使えるということでcdbk.net CREATIVES.で早速導入してみました。
下が使用前のサイト(Mac/Chrome)の表示。
そして、下がTypeSquare適用後。
使用しているUDフォントによって可読性があがりました。
Web fontもだいぶ普及してきたのでこういった技術を使い、よりよいサイトを作っていきたいです。
デコメ用画像を検索できるサイト「LookApps for decomail」リリース
以前作っていたデコメ用画像検索サイトをデザインしなおし、公開しました。
サイズ、使い勝手はスマートフォン向けに最適化、内容も出来る限りシンプルにしています。
検索エンジンにはGoogle Search APIを使用、使えば使うほどおかしいところ散見かもしれないですが、そこはBETAということで改善し続けていきます。
スマートフォンにしてデコメしたいけれど、画像がないといったかたにぜひ使ってもらいたいです。