前にこの記事で、レスポンシブデザインをコーディングの仕方の基本的なことを説明をしましたが、今回は自分が製作してる時に気をつけていることや、よく使う方法を書いておこうと思います。 案件や作業フローによって全然違う方法がよい場合もあるかもしれませんので、参考程度にどうぞ。 要素のマークアップ順序 会社や作業フローによるかと思いますが、今のところ、PC用とスマートフォン用のデザイン2枚が出来上がってくる事が自分は多いです。 そのデザインを見ながらHTMLを作っていきますが、この時スマートフォンのデザインを見ながらマークアップしたほうが良いと思いました。 文章の意味付け的にデザインで順序変えるのはどうなのよというのはありますが・・・。 positionを使って再現するデザインの場合はPCは簡単に位置を入れ替えることができますが、スマートフォンのデザインは320px~リキッドデザインにすることが多い
こんにちは。デザイナーのももこです。 直近は、雨の降る鎌倉でアイドルに大量の和菓子を渡す忙しい日々を送っております。 今回はレスポンシブWebデザインのサイトを制作する際に役立つツール、Webサイトを6つご紹介します。 The Responsinator iphone・Android・iPad・Kindleの枠にそれぞれWebサイトを嵌めこんで表示してくれます。シンプルなデザインの枠が素敵です、縦横表示を同時に見れるのも利点ですね。 http://www.responsinator.com/ Responsive Web Design Test Tool モニターの大きさを変えてリアルタイムにレスポンシブの動作確認が出来ます。 画面にメモリがついており、右上に画面サイズも出ているので使いやすいです。 スマートフォンからデスクトップまで各製品の画面サイズも用意されており、お手軽に利用できます
フォントの使い方 フォントは、<FONT>タグのface属性を使って以下のように指定します。 <FONT face="Arial">This Font is Arial</FONT> 指定したフォントが見つからなかった場合、有効になりませんので、対策として複数のフォントを指定することが可能です。 その場合、左から優先的に表示されます。 <FONT face="Arial","Arial Black","MS P明朝">複数のフォント</FONT> 以下のようにスタイルシートでも指定することが可能です。 <SPAN STYLE="font-family:'Arial','Arial Black'">スタイルシート</SPAN>
設定方法 [ツール]→[FireMobileSimulator]→[オプション設定]から設定をします。 端末の幅に画面を合わせたりできます。 Firefox終了時にシミュレータの設定を解除することができます。 ただしブラウザを手動で閉じないと、解除されません。PCのシャットダウンで閉じたときには解除されません。 固体識別番号(ID情報)を個別に設定することができます。 複数の開発者でモバイルサイトを製作するときには、それぞれ違うIDに設定することをおすすめします。 [参考記事] 個体識別情報の取得方法 端末情報を追加削除することができます。 ブラウザで追加される端末情報は有志の方々が登録しているため、間違っている場合もあります。 端末から送信される位置情報(GPS情報)を編集することができます。 Softbankには対応していないようです。 また送信される位置情報にはバグがあります。 位置
5月も終わりに近づいてきました。今月もGoodpatch社内で共有された新しくておもしろいデザインやアプリ、Webサービスをご紹介します!今月は社内でSketch.appを始めとする様々なWeb制作ツールが共有されました。まだローンチされてないものもありますが、今後よく使うツールになるかもしれないものもあるかもしれないので要チェックです! 先月の同様のまとめ→ 「新しいものが大好きなグッドパッチで4月に話題になったアプリ、サービス、デザインまとめ」 Web制作ツール BRIEFS http://giveabrief.com/ プロトタイプが作成できるアプリです。iPhoneやiPadのデバイスで検証することが可能です。ちなみにこのアプリは最近リリースされ、Goodpatchが一番最初に購入したみたいです。 Sketch iOS Mirroring http://bohemiancoding
アプリ開発においてプロトタイプが重要なのは言うまでもありませんが実際にプログラムを書いてプロトタイプを作るのって結構大変な作業です。 今日ご紹介するのはプロトタイプを簡単に作れるサービスです。簡単に作れてスマートフォン上で実際のアプリに近い状態で動作するので後になって「やっぱりこの画面いらなくない」など開発後半で仕様が変更されることも少なくなると思います。 iPhoneアプリだけでプロトタイプが作れるアプリ「POP」 今日ご紹介するPOPは簡単にプロトタイプを作るためのアプリです。POPは、Prototype on Paperの略です。PC上でプロトタイプを作るサービスやアプリはいくつか見たことがあったのですが、アプリだけでここまでシンプルに実現したものは珍しいと思います。 1.アプリ画面デザイン(ワイヤーフレームなど)の画像をカメラで撮影することができます。 2.撮影した画像にリンクを付
■放送と通信の融合をHTML5技術で実現 近年,パソコン(PC)や携帯端末と同様に,テレビ(TV)などのAV機器や生活家電機器からも,Webアクセスが可能になってきています。W3C(World Wide Web Consortium)では,放送と通信の融合に関する規格策定が必要であるとの考えから,家電メーカー,通信・放送事業者,及びソフトウェアベンダーなどのメンバーから成る“Web and TV”インタレストグループ(IG)により,家電機器を含めた様々な機器とWebとの連携をより高い次元で実現するために必要となる,Web 技術,放送技術,及び各種機器制御技術などの統合化に関する課題を明確化するため,議論を進めています。 東芝は, その中心的メンバーとして活動を推進しています。 ■放送と通信の融合における課題 従来の放送では,放送局が中心になって運用規程を策定し,メーカーがそれに従ってTVを
コンテンツマーケティングのコンサルタントとして過去7年で70社のオウンドメディア運用を支援に携わる。クライアントは医師、歯科医師、弁護士、税理士、司法書士、ファイナンシャルプランナー、ヨガインストラクター、パーソナルスタイリスト、上場企業のマーケティング担当者など多岐にわたる。 サイト公開からわずか10ヶ月で14.6億円の生み出す不動産投資メディア、契約率40%程度の理想的な見込み客が集まるブランディングメディアなど数々の成功事例を生み出してきた。「ユーザーに集中すれば結果はついてくる」をモットーに年間4,000件以上のコンテンツ作成に携わっている。 …続きを読む コンテンツマーケティングのコンサルタントとして過去7年で70社のオウンドメディア運用を支援に携わる。クライアントは医師、歯科医師、弁護士、税理士、司法書士、ファイナンシャルプランナー、ヨガインストラクター、パーソナルスタイリスト
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない><」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか? HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる 【発表】最新のHP作成方法はこちらへ ホームページビルダーを無料でお探しのあなた。 ホームページビルダーといえば、これ↓ 「ジャストシステムのホームページビルダー」なら、こちらですぐにダウンロードできます。 しかし、焦らずちょっと待ってください。 web制作歴14年目の僕は、ジャストシステムのホームページビルダーをおすすめしません。 なぜなら、このJustSystemホームページビルダーには以下のようなデメリットがあるからです。 ダウンロードしてからインストールするのが面倒 レンタルサーバーも必要。そ
昨日書いた記事、 blog.egachan.net の中で、私は、 「A/Bテストや分析を行い、最適化をしていくよりも、まずは、競合サイトでやっていて自社サイトでやっていない機能やサービスを実施していくべき、それらの施策をやりきったら、その後、A/Bテストや分析などの最適化に着手していくべき」 ということを書かせて頂きました。すると、コメントで、 ・「競合サイトの真似だけでは、競合サイトを追い越せない」 ・「競合他社サイトの分析だけでは不十分」 という意見をいただきました。 私としては、 1:競合他社の調査 → 2:競合他社でやっている機能やサービスで、自社サイトで必要なものは実施 → 3:その中でA/Bテストや分析を駆使しチューニングをしていく というステップがいいと思っているのですが、「競合他社から参考にするだけは不十分!オリジナル性のあるアイディアや機能を入れていくべき!」という意見
この前「英語圏のWEB屋な人たちが読んでそうなブログ教えて」って具合の、まぁいつも通り取り留め無く唐突な質問がありまして、コレまた僕にとってはいつも通り『北米WEB屋なら誰でも知ってるんじゃないかって思うサイトをまとめてみた』って記事を共有しようとしたんですが、コレもう2年前の物じゃーないですかってことに気付いたわけです。 結構僕はこういう質問に返答するノリで書いた記事のリンク送るってコトが凄く多いので、じゃぁこの記事も古いし、リバイスするかって軽い気持ちで書きだしたんですが、コレが意外とめちゃめた大変。大変って言うか、量が半端ないことになっておりまして… 正直、去年くらいからだいぶ暇な時間が出来てしまい、購読するブログの数もだいぶ増えていて、うーんって感じなんですが、まぁ良い機会なので僕が『これは読んどいていんじゃね?』ってオススメするブログやら記事やらを色々共有させて頂こうかなと思いま
モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお
ピクセル密度とピクセル比の関係 ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです(と考えています)。たとえば、Galaxy S IVのようにピクセル密度は441ppi、ピクセル比は2という端末もあれば、HTC Oneのように、ピクセル密度は468ppiだが、ピクセル比は3という端末もあります。 ※両方とも実機で検証したわけではないので、Wikipediaの情報が正しければの話ですが。 ※ピクセル比とは違うものですが、それと似た単位であるdppx (dots per pixel unit)では、CSSで定義された1インチが96pxになるため、1dppx = 96dpiになります。 ピクセル比に似た値「dp」とwindow.devicePixelRatio Androidの密度非依存ピクセル「dp」 Density-i
先日、長谷川恭久さんとの共同プロジェクト、“Patch Project”がスタートしました。これはUIデザインの新しいワークフローを作るために立ち上がったプロジェクトです。これまでのワークフローを見直して、より良いUIを作っていくためにはどうするべきなのか、実際に何かのUIをデザインしながら模索していきます。そのプロセスや結果はどんどんオープンにしていきますのでお楽しみに! まず今回はその導入部分として、ワークフローの提案について長谷川さんに話して頂いた内容を記事にしました。前編では、デザインカンプをやめてプロトタイプを作るべき理由を中心にまとめています。 そもそもUIとは何か UIの話というと多くの人がビジュアルデザインの話をしますが、そもそもUIとは人間とコンピュータの関係を円滑にするためのものです。人がコンピュータと関わるとき、そこには必ずインプットとアウトプットがあります。その中で
先日、弊社プログラマーの段田さんのブログで、ボーナスアップの道具として利用された野田です。 あれは、久しぶりに傷ついた。 そして、プライベートでもいろんな人にいじられた。 ネットって怖いですね。 さて、今回は、WEB制作に役立つ定型文のご紹介を致します。 僕自身、デザインする際に構成からガッツリ考えるのが大好きっていうか仕事なので、 それにあわせてダミーテキストを考えることが多いです。 デザインを提出する際には、「テキストテキストテキスト」や「ダミーダミーダミー」で提出することは絶対にしません。 お客様の意図を読み取ってこちらからご提案させていただくということも、Webデザイナーには必要なスキルの一つだと思うからです。 あたりまえなことですが、こういう部分に気づかない方も案外いらっしゃいます。 正直、僕もデザインを始めてすぐの頃にはそんな感じでした。 「仮」という言葉に甘えてしまう事は良く
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く