Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice
アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考：Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 （※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか？ 情報が見つからなかったので知ってる方は教えてください） また、viewportの数値はサイト側で指定できます。 スマホ
Photoshopで理論的に配色はできないものか検証してみた
最近は配色を作れるジェネレータや配色をシェアするサイトが多数あり、簡単に配色を作ることができます。ただ、そういうのに頼らずにもっとPhotoshopだけで理論的にできないものかと思い検証してみました。 動機 配色を作れるツールっていまいち使いこなせてないし、自分がイメージしてる配色をPhotoshopで理論的に作れたら楽だなと思って。 結論 最初に結論を述べます。 Photoshopで色相を使った配色は基本的には難しいです。（できなくはないが非常に手間がかかる） 彩度・明度を使った配色は簡単にできる。 また、トーンを使った配色ならそれなりにであればできる。という結論になりました。 Photoshopの表色系の落とし穴 色相を順序立てて円環にして並べたものを色相環と言い、色相環の反対の位置が補色となります。 つまり基準となる色に180°足した色が補色になります。 ところが下記のようにPhot
ビジネスに最適なタイムトラッキングツールPaymo
仕事において作業にどのくらいの時間が掛かるか把握するのは重要で、そのために便利なのがタイムトラッキングツールです。 僕がメインで利用しているタイムトラッキングツールPaymoの紹介をします。 仕事において作業にどのくらいの時間が掛かるか把握するのは重要で、そのために便利なのがタイムトラッキングツールです。 僕がメインで利用しているタイムトラッキングツールPaymoの紹介をします。 Paymoはプロジェクト管理や複数ユーザーでの共有、請求書の発行まで行えるタイムトラッキングツールです。 Free Time Tracking Software – Paymo Paymoで出来ること タイムトラッキング プロジェクト管理 マイルストーン 複数ユーザーでの共有 請求書作成 クライアントの管理 データのエクスポート 1ユーザーの場合は無料で利用できます。 その他内容に応じて2つの有料プランが用意され
Adobe Bridgeの使い方と便利な10機能
個人的に制作に欠かせないアプリケーションの一つがAdobe Bridgeです。 制作者の方は既に知ってるアプリケーションだとは思いますが、春ということで、新人の制作者やAbodeのアプリケーションを使い始めたばかりの人向けに書いてみました。 個人的に制作に欠かせないアプリケーションの一つがAdobe Bridgeです。 制作者の方は既に知ってるアプリケーションだとは思いますが、春ということで、新人の制作者やAbodeのアプリケーションを使い始めたばかりの人向けに書いてみました。 多数の形式のファイルをプレビュー サブフォルダ内の表示 ファイル名のリネーム ワークスペースの切り替え キーワード・レート・ラベルの追加 フィルター スマートコレクション スタック フルスクリーンプレビューやレビューモード Mimi Bridge Adobe Bridgeは写真や制作ファイルの管理・閲覧が簡単にでき
Appleが推奨するSkeuomorphic Designとそのメリットデメリット | Design Spice
最近Appleのアプリを中心に、質感や特徴など現実世界のモチーフを模倣したデザインをよく見るようになりました。 このようなデザインをSkeuomorphic Designと呼ぶそうです。このSkeuomorphic Designについて書いてみました。 最近Appleのアプリを中心に、質感や特徴など現実世界のモチーフを模倣したデザインをよく見るようになりました。 このようなデザインをSkeuomorphic Design(またはSkeuomorphic UI)と呼ぶそうです。 このSkeuomorphic Designについて書いてみました。 Skeuomorphic Designとは まずskeuomorphという言葉から。 skeuomorph 語源：ギリシャ語のskeuos（容器、実装）morph（フォーム）から。 skeuomorphは、様々な目的のために用いることができます。 デ
フリーランスになりました
3月31日で派遣の仕事を辞めて、4月1日より完全にフリーランス一本にしました。 ご挨拶 4月1日より完全にフリーランスになりました。 正確には去年からフリーとして活動はしてたのですが、 3月までは派遣と並行しており、4月からはフリーランス一本になります。 屋号はツクリベ(TSUKURIBE)です。 いちクリエイターであり続けたいという思いからです。 TSUKURIBE 数ヶ月は仕事がない可能性も考慮してたのですが、 幸い仕事がある状態でスタートを切れました。 こうして好スタートが切れたのも周りの方達のおかげであります。 本当に感謝してます。 周りの方に助けられたり刺激を受けながら精進していきます。 今後ともよろしくお願い致します。 以下はこれまで経緯や今後の話です。 長文なので興味のある方は読み進めてください。 発端 昨年一月にそれまで勤めていた職場を退職しました。 割と自由がきいて恵まれ
twitter APIとjQueryでtwitter widgetを作成する
twitterのwidgetのデザインをカスタマイズしたいのと、リプライを表示させたくないと言う理由からtwitter APIとjQueryを使ってオリジナルのwidegetを作成しました。 当ブログでは殆どデザインしてませんが、公式のwidgetに近いデザインで作成する場合の記事にしました。 twitterのwidgetのデザインをカスタマイズしたいのと、 リプライを表示させたくないと言う理由から twitter APIとjQueryを使ってオリジナルのwidegetを 作成しました。 当ブログでは殆どデザインしてませんが、 公式のwidgetに近いデザインにする場合の制作方法を書きました。 サンプル ベースはA jQuery Twitter Ticker | Tutorialzineを参考にしてます。 また複数ユーザーのツイートを表示したい場合は上記サイトが参考になります。 ソース <
WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ
前回のエントリーからjQueryMobileでスマートフォンサイトを制作し、その後幾つかの修正を重ねそれなりの形になってきたので作業の流れをまとめました。 WordPressのプラグインKtai Styleを使ったjQuery Mobileスマートフォンサイトを制作する流れです。 前回のエントリーからjQueryMobileでスマートフォンサイトを制作し、その後幾つかの修正を重ねそれなりの形になってきたので 作業の流れをまとめました。 やり方は人それぞれだと思いますが、 作業の参考になってくれたら幸いです。 ラフの作成 HTMLマークアップ デザイン（テーマ）のカスタマイズ WordPressテーマ作成 Tipsなど 1.ラフの作成 一般的なwebサイト制作と同様にまずラフを制作します。 また、jQuery Mobileの特徴でもある画面遷移時の効果や、 表示のされ方などもこの時点で決めて
知識0からのjQuery Mobileを使ったサイト制作に役立ったサイト
このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、今回の制作にあたり役に立ったサイトをまとめました。 このブログのスマートフォンページをjQuery Mobileを使用して制作してみました。 それ以前はjQuery Mobileについてほぼ知識0の状態だった私が、 今回の制作にあたり役に立ったサイトをまとめました。 jQuery Mobile | jQuery Mobile 本家本元。 敢えて紹介するまでもないのですが一応。 現在のバージョンは1.0RC2（2011.11.01現在）です。そろそろ正式版がでる予定です。 jQuery Mobile 1.0b1 日本語リファレンス jQuery Mobile 1.0b1 日本語リファレンス バージョン1までの内容ですがjQuery
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://design-spice.com/2012/06/13/responsive-web-design-image/