WebサイトをiPhoneに対応させる -レスポンシブ・ウェブデザイン- - EC studio デザインブログ
このところのスマートフォンの広がりにより、デザイン部でもWebサイトのスマートフォン対応の必要性をひしひしと感じています。 実際のスマートフォン対応の取り組みとしてはこれからなのですが、その時のために従来のサイトをスマートフォンに対応させる方法、特に今回は閲覧環境に応じてページレイアウトを柔軟に切り替える、レスポンシブ・デザイン レスポンシブ・ウェブデザイン（Responsive Web Design）（ご指摘ありがとうございます。）に関していまさらながら調べてみたので、大枠的なことをふわっとまとめておこうと思います。 レスポンシブ・ウェブデザインって まず「レスポンシブ・ウェブデザインとはなんぞや」と言うところですが、 Webサイトのページレイアウトを閲覧環境（パソコン、iPhone、Android など）に応じて動的に変更させる手法で去年あたりからよく耳にするようになりました。 ブラウ
Fireworksで立体的なアイコンを7分で作る方法 - EC studio デザインブログ
さて、今回は前回の「Fireworksで立体的なアイコンを作る方法」よりも もっと簡単にできるアイコンの作り方です。 今回は5分で作れるアイコンのご紹介！！ …の予定でしたが、ブログ記事用に作り直したら7分ちょうどかかりました。 すみません… 操作自体は簡単なので、速い方は5分でできると思います。 ぜひ、5分に挑戦してみてください！ アイコンはこちら、建物アイコンです。 ページ下部で制作動画の紹介や、ベクトルデータのダウンロードも可能です。 会社概要の見出しなどに使ってみてくださいね。 速く作るポイントは2つ パスの変形「歪みツール」を使う フィルター効果「シャドウ（内側）」を2つ重ねて使う たったこれだけです。 1.平面の形を作る パースのあるアイコンですが、 まずは真正面から見た図（平面図）をつくります。 2.歪みツールで立体的にする 平面ができたら、１面全部を選択し「歪みツール」で立
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
パフォーマンスアップを意識した画像形式の書き出し方法 - EC studio デザインブログ
サイトのパフォーマンスアップをしたいけど、 作業をする時間がつくれない、作業するにしても影響範囲が大きくて なかなか実行できない…ということは非常に多いと思います。 そこで、今回は簡単！すぐできるパフォーマンスアップ！ Webサイトに最適な画像形式の書き出し方法をご紹介します。 以下で書き出した画像はFireworks CS5 を使用して書き出しています。 EC studio では基本的に画像はPNG8で切り出しています。 なぜかというと、ほとんどのPNG8画像のファイルサイズがGIFより軽いことと、 可逆圧縮で透過表示もできるからです。 しかし、状況によってはPNG8以外の形式も使用します。 主に写真はJPEG、半透明の画像はPNG8、PNG32、 アニメーションはGIFに書き出します。 PNGとGIFとJPEGがどの画像で使うのが向いているか比べていきましょう。 256色以内の画像の場
HTML5を今すぐ使うためのコツや情報をまとめてみました - EC studio デザインブログ
この数カ月でHTML5のサイトが国内にも増えてきました。先日10周年を迎えた EC studio のサイトもHTML5で制作しています。マークアップの面でのHTML5の導入となりましたが、難しいと思う以上に勉強になることが多くありました。（今も改善を続けています。） http://www.ecstudio.jp/ 個人サイト以外でHTML5を導入するのをためらっている人が多いと思うので、今からでも使っていくためのコツやノウハウをまとめてみました。 新要素をJavaScriptで生成する HTML5の新要素はIEでは未知の要素です。そのため記述していてもDOMツリーが構成されなかったり、CSSが適用されないという問題が生じます。 そこでdocument.createElement(要素名);により、ブラウザ（ユーザーエージェント）にとって未知な存在の要素を生成し、認識させることができます。
FireworksとPhotoshopの書き出し画像を比べてみた！～ドットコーダーセッションまとめ - EC studio デザインブログ
2010年9月25日に.coder「すこーし愛して。ながーく愛して。Webパフォーマンス」でプレゼンさせていただきました。 あまりのイケてるプレゼンテーターの中にちょっと申し訳ない感じでしたが、 みなさまアットホームに迎え入れていただき、楽しい1日を過ごすことができました。 私は「みんなで使おう！Fireworks！ 〜Fireworksで画像最適化〜」というお題で プレゼンしたので、簡単にその中身をここでも紹介させていただきたいと思います。 今回はFireworksとPhotoshopの画像の書き出し方を比較してみました。 ちなみに使用したアプリケーションはFireworks CS5 とPhotoshop CS5 です。 PNGの書き出しは実はFireworksのほうが軽量！？ PNGを書き出すときに画像データ以外のチャンクという必要のないデータも書き出されます。 実はそのチャンクデータ
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
FireworksCS4が重い・固まる現象を改善する方法 - EC studio デザインブログ
FireworksをCS3からCS4へバージョンアップしてから、 頻繁に重くなる、固まる、メモリが不足して保存できなくなる・・・ といった現象に困っていました。 でもCS4にしかない便利機能もあるし、 バージョン落とすのは勿体ない。 どうにか軽くなる方法はないかな？と色々試してみたところ、 どうも取り消し（ヒストリー）回数の設定に原因があるようです。 FireworksCS4のツールバー「編集」→「環境設定」→「一般」から 最大取り消し回数が確認できます。 CS3のデフォルト設定が「20」にたいして、 CS4はデフォルト設定は、なんと「200」！！ 桁違いの設定に、さすがにビックリ。 どおりで長時間つかってたら固まるわけですね。 今日一日、設定をCS3と同じ20に変えて試してみましたが、 昨日より確実に軽い！！ 毎日のようにでてきたメモリ不足による保存エラーもでてこない！！ (エラーで保存
img要素のwidth,height属性は指定しない - EC studio デザインブログ
img要素におけるwidth,height属性の指定というのはHTMLを勉強しはじめたときから「必須」のものであると考える人が多いと思うのですが、 これは「必須」ではありません。 また弊社では社内のガイドラインとして 「img要素にはwidth,height属性は指定しない」としました。 この方が現状メリットが大きいと考えたからです。 width,height属性の指定が「必須」であるか「任意」であるか 結論からいうと、仕様書上「任意」とされています。 これは弊社サイトで多く採用されている XHTML1.0（Transitional）においてはもちろん、strictであれ、HTML4.01であれ「任意」とされているのは同じです。 しかしそれがなぜ「必須」というような流れになったか？ その大きな理由としてはNetscape Navigator 4.xのような今となっては古くなったブラウザへの
知ってるようで、実は知らない?！ Fireworksの小技 - EC studio デザインブログ
こんにちは、端山です。 デザイン部は全員「Fireworks」を使っていますが、 みんな実務経験やスキルが違うので、基本独学で習得。 そのため、たまに他の人の作業をみてると 「あ、そんな簡単なやり方があるんだ！」ということが･･･ 今回はそんな「知ってるようで、実は知らない?!」 Fireworksの小技をご紹介します。 細い矢印を作る方法 オートシェイプから引く太い矢印ではなく、オープンパスから作る 細い矢印の作り方をご紹介します。 1．「ラインツール」か「ペンツール」でオープンパスを引く 2．オープンパスを選択する 3．ツールバーの「コマンド」→「クリエイティブ」→「矢印の追加」 4．好きな矢印の形を選んで「OK」をクリック！ 曲線上にテキストを配置する方法 普段あまり使うことがないので、いざという時に 「どうやるんだったかな？」と忘れてしまいがちな小技。 1．テキストを入力する 2．
効率的！Fireworks CS3ショートカットキーまとめをデスクトップ壁紙に！ - EC studio デザインブログ
あけましておめでとうございます、赤堀です。 今回はFireworks CS3ショートカットキーまとめデスクトップ壁紙を無料で配布します。 なぜデスクトップ壁紙かというと、今年はFireworksを使いこなしたい！と考えているときに ショートカットキーを壁紙にしてみたらいんじゃないかな？と思ったからです。 「Fireworks CS3 ショートカットキーまとめデスクトップ壁紙」でさらに作業を効率化！ Fireworksのデフォルトのショートカットを覚えて あなたの席でも私の席でも効率化！を目指しちゃいましょう。 無料でダウンロードできるので、ショートカットキーが苦手な方や Fireworks初心者の方にぜひ使っていただきたいです。 このデスクトップ壁紙のショートカットキーは Fireworks CS3をインストールしたときそのままのショートカットキーです。 デスクトップ壁紙はWindows版
テンションを下げないためのフォーム設計 - EC studio デザインブログ
こんにちは。新免です。 サイトの制作者や、サイトの運営者の方なら、 購入フォームや登録フォームって、みなさん気にされますよね。 商品の購入や、お問い合わせ、会員登録など、 サイトが目標としていることをゴールとすれば、 そのゴールにどうすればスムーズに到達するかを考えなければなりません。 その中でも、難しいのが購入フォームや登録フォーム。 購入フォームまで来たけど、入力項目の数が多すぎるのでフォームを 見た瞬間にそのサイトから離れたり、なんだかわからないけど、 エラーばかり出るので途中で購入を諦めたりと、 フォームにたどり着くまでは欲しいものがありテンションが上がってたけど、 フォームに来たとたんユーザーのテンションが下がったのでは ゴールにたどり着けません。 いかにユーザーのテンションを下げずにゴールをさせるかが重要になり、 そのためにはユーザーに不安感を与えたり、ストレスを与えたりしては
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
