サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
2024年ランキング
designblog.ecstudio.jp
2012年3月1日からFacebookページにタイムラインが適用されるようになりました。 3月30日には全Facebookページが強制的に新デザインに切り替わるので、 今のうちにデザインを修正して対応しちゃいましょう！ 新デザインの変更箇所まとめは、いろんなブログで紹介されているので、 今回は、デザイナー視点での、新デザインへの対応のコツをまとめました。 続きを読む デザインしている中で、パスを合体したり分割したり パスを変形させることは多いと思います。 変形させるとき、多くの方は「パス」パネルを使用すると思いますが、 アイコンだけ並んでいても、どれがどんな働きをするのかわからなくなることはありませんか？ アイコンの絵でなんとなく合体する…くりぬかれる…と、動きは予想できますが どちらのパスが前面・背面にあるかで、またさらに形が変わってきます。 今回はそんなちょっと迷う「パス」パネル、 F
2012年3月1日からFacebookページにタイムラインが適用されるようになりました。 3月30日には全Facebookページが強制的に新デザインに切り替わるので、 今のうちにデザインを修正して対応しちゃいましょう！ 新デザインの変更箇所まとめは、いろんなブログで紹介されているので、 今回は、デザイナー視点での、新デザインへの対応のコツをまとめました。 カバー写真を設定しよう！ まずは1番ユーザーの目をひくカバー写真を設定しましょう！ カバー写真とは1番上に表示される画像のことです。 最低幅399px以上の画像を設定してください。 サイズ的には851*315がキレイに表示されます。 （ただし、解像度の低いPCの場合は一部表示されないことがあります） このサイズより小さくても設定はできますが、画像が引き伸ばされて画質が落ちてしまうので注意が必要です。 画像を作成する際の注意点としては 「今
デザインしている中で、パスを合体したり分割したり パスを変形させることは多いと思います。 変形させるとき、多くの方は「パス」パネルを使用すると思いますが、 アイコンだけ並んでいても、どれがどんな働きをするのかわからなくなることはありませんか？ アイコンの絵でなんとなく合体する…くりぬかれる…と、動きは予想できますが どちらのパスが前面・背面にあるかで、またさらに形が変わってきます。 今回はそんなちょっと迷う「パス」パネル、 Fireworksでいう「パスを連結」部分の早見表をつくったのでご紹介します。 「パスを連結」パネル 機能一覧 まずはパネルのどこに機能が配置されているのか 確認しましょう♪ 「パスを連結」パネル 早見表 私がよく使うのは「合体」と「型抜き」です。 パスで何かの形をつくるとき、ペンツールは使わず 長方形ツールや円ツールなどで複数のパスをつくり重ねて「合体」や「型抜き」を
今回はESET mac版の公式サイトで使用した擬似要素（:before・:after）を使ったbox-shadowのエフェクトを紹介していきたいと思います。 ESET Cybersecurity（イーセット サイバーセキュリティ）と ESET Smart Securityのサイトでデザインアクセントとして実装しています。（2011/11/15現在） 実際の使用例 今回は、コンテンツボックスの影の中央部分が少し膨らんでいるようなエフェクトを使用しています。 コードは以下のように記述しています。
Webサイトにアニメーションを取り入れる場合には、いくつか方法があると思います。代表的なところでいうと、 ・JavaScript、jQuery ・Flash ・CSSアニメーション などが挙げられます。 ただ複雑な動きとなると、高度なコードを書く必要があったりと、それなりに難しくなります。ですが、シンプルなアニメーションでも組み合わせることで、パッと見複雑に見える動きを付けることができます。 そのアニメーション手法というのは、先日、京都で開催された"Ti.Developers.meeting vol.03（Titanium mobileでのアプリ開発者が集まる関西方面のミートアップ）"でのコバヤシトールさん（@toru0325 / もぐもぐエンターテイメントアプリ - MogSnap）のセッションで紹介されていたもので、その斬新な技法に驚かされたと共に、日頃の制作に対する姿勢の面でも改めて
[追記]2010/08/25 本記事投稿時には、コメントの通知が受け取れないと書いていましたが、FacebookアプリケーションとWordpressのFacebook Comments for WordPressを紐付けておけば、Facebook側のComment Moderation toolにmoderatorとして登録したユーザーにはコメントのお知らせが通知されるようです。 突然ですが、Facebook活用していますか？ 弊社ではFacebook活用の一つとして、先日社長ブログにFacebookコメントを設置しました。 しかし設置したまでは良かったのですが、このFacebookコメント、新しいプラグインになってから新着コメントの通知ができなくなったようで、せっかくコメントをいただいても見逃してしまう、何かいい方法はないのか！となりました。 そこで、今回は弊社でおこなっているコメント管
2011年6月28日、この日はEC studio にとって記念すべき1日となりました。 と言いますのも、弊社で提供しているクラウドベースのビジネスチャットツール「ChatWork」の海外サービス展開がスタートした日だからです。 デザイン部はこのプロジェクトでは主に「チャットワークツールのUI設計と実装」、「Webサイトの企画・制作」を担当しました。 しかしEC studio では海外展開がはじめての試みであったため、今回はシリコンバレーにあるグローバル展開サポートやWebサイト制作などをおこなっているbtraxさんに海外展開を目指すWebサイト制作のアドバイスをお聞きしました。 そこで今回の記事は、そのアドバイスをもとに、海外のWebサイトをいくつか研究して参考になりそうだと感じたポイントをまとめておくことにします。 1. 情報を詰めすぎない まず一つ目のポイントは、「情報を詰め込みすぎな
iFrame版Facebookページの作成方法としては ・デザインを作成する ・アプリ開発者登録をする ・コーディングをおこなう ・htmlをサーバーにアップする ・iFrameページ用のFacebookアプリを作成する ・FacebookページにFacebookアプリを追加する をおこなっていきます。 デザインの作成に関してはPart.1の記事を参照してください。 以下では開発者コードの取得から記述していきたいと思います。 アプリ開発者登録をしよう iFrame対応FacebookページはFacebookアプリとして作成してから Facebookページに組み込むので、アプリ開発者として登録必要になります。 「開発者ページ」の「Set Up New App」をクリックすると、 登録画面が表示されます。 「携帯電話のアドレス」か「クレジッドカード番号」の入力で登録を完了できます。 まずは登録
最近は、企業や製品・サービスなどで Facebookページをもつことが増えてきています。 EC studio でも先日チャットワークのFacebookページをリリースしました。 そこで、今回はFacebookページの作り方について書きたいともいます。 Facebookページとは すでに知っている方も多いかもしれませんが、 Facebookページとは何かということを少し書きたいと思います。 Facebookページは、旧ファンページのことを言います。 企業や団体、製品やサービス、芸能人やアーティストなどが 情報を発信する、コミュニティページのことです。 ユーザーは、お気に入りのFacebookページに対して 「いいね！」をクリックすると、最新の情報がウォールに流れてきたり、 そのページに対し、自由にコメント投稿できます。 また、「いいね！」をクリックすると、自分の友達にも「いいね！」をした F
このところのスマートフォンの広がりにより、デザイン部でもWebサイトのスマートフォン対応の必要性をひしひしと感じています。 実際のスマートフォン対応の取り組みとしてはこれからなのですが、その時のために従来のサイトをスマートフォンに対応させる方法、特に今回は閲覧環境に応じてページレイアウトを柔軟に切り替える、レスポンシブ・デザイン レスポンシブ・ウェブデザイン（Responsive Web Design）（ご指摘ありがとうございます。）に関していまさらながら調べてみたので、大枠的なことをふわっとまとめておこうと思います。 レスポンシブ・ウェブデザインって まず「レスポンシブ・ウェブデザインとはなんぞや」と言うところですが、 Webサイトのページレイアウトを閲覧環境（パソコン、iPhone、Android など）に応じて動的に変更させる手法で去年あたりからよく耳にするようになりました。 ブラウ
サイトに設置した「いいね！」を押したとき、 タイトルとテキストだけではちょっと物足りない感じがしませんか？ OGP（Open Graph protocol）の対応をおこなうだけで、 ウォールが少し華やかになります。 弊社サービスサイト「チャットワーク」で対応した時におこなった対応方法を紹介したいと思います。 弊社サービスサイトのOGP対応後 OGPを使うとどうなるの？ OGP（Open Graph protocol）を使うと、 「いいね！」を押してウォールに投稿するときに、 タイトルや概要、表示する画像を指定することができます。 通常はFacebookが自動で表示してくれます。 OGPに対応する前のデフォルトはこのように表示されていました。 OGP対応方法 htmlタグの記述 まず、htmlタグにOGP用の記述を追記します。 「xmlns:og="http://ogp.me/ns#" xm
さて、今回は前回の「Fireworksで立体的なアイコンを作る方法」よりも もっと簡単にできるアイコンの作り方です。 今回は5分で作れるアイコンのご紹介！！ …の予定でしたが、ブログ記事用に作り直したら7分ちょうどかかりました。 すみません… 操作自体は簡単なので、速い方は5分でできると思います。 ぜひ、5分に挑戦してみてください！ アイコンはこちら、建物アイコンです。 ページ下部で制作動画の紹介や、ベクトルデータのダウンロードも可能です。 会社概要の見出しなどに使ってみてくださいね。 速く作るポイントは2つ パスの変形「歪みツール」を使う フィルター効果「シャドウ（内側）」を2つ重ねて使う たったこれだけです。 1.平面の形を作る パースのあるアイコンですが、 まずは真正面から見た図（平面図）をつくります。 2.歪みツールで立体的にする 平面ができたら、１面全部を選択し「歪みツール」で立
Webサイトのデザインをしているときに 「あ、このグラデーションって、どういう色だったかな？」 「ここのフォントはなんだっけ？」ってことがあります。 そういう時に便利なのがFireworksのスタイル機能です。 スタイル機能って何？って人のために、少し解説したいと思います。 スタイル機能とは、Fireworksに登録されている スタイルパレットのことで、グラデーションスタイルや フォントのスタイルを、選択したオブジェクトに対して 一括で変換してくれる機能のことです。 このスタイル機能を活用することで次のようなメリットが得られます。 デザイン作業の手間が軽減される 同じスタイルを適用する際に、色やグラデーション、 ドロップシャドウなどの値を覚えておく必要がない デザインの表現の幅も広がる スタイル機能の使い方 このように、Fireworksにはいくつかスタイルが 登録されています。 試しに1
サイトや広告バナーをつくる際に、イメージアイコンを使うことがよくあります。 ただ、配布されているイメージアイコンを使用する場合、 「形を少し変えたい！」 「複数のアイコンを組み合わせて使いたい！」 など、サイトなどの雰囲気に合うよう、手を加えたくなる時があります。 ただ、データの加工が不可だったり、加工するのに時間がかかったり… 時間短縮のために配布素材を使ったのに意味がなかった！なんてこともあります。 そんな時はイメージアイコンを 最初から自分で作る！ というのも1つの方法です。 今回は、Fireworksを使って簡単に立体的なアイコンを作る方法を ご紹介したいと思います。 作業は単純。 パスの合体 パスの切り抜き 拡大縮小 の繰り返しです。 1.形をつくる 楕円を2つ描きます 楕円の上に四角を重ねて合体させます 合体したパスの上にさらに四角を重ねて切り抜き、余分な部分をカットします 合
3月5日（土）に、待望のFireworks特集LP14 「Photoshopper meets Fireworks」に行ってきました！ 過去のブログ記事からもわかるように、弊社のメインソフトはFireworks！ 入社当時はPhotoshop派で触ったこともなかったのですが、 今ではすっかりFireworksなしでは生きていけない！ このFireworks特集、たしか去年の秋ぐらい？に 開催の話があがったけれど、延期になり… 本当に開催されるの？Fireworksってそんな人気ない？ …と、余計なことを考えていましたが、当日は満席！ 会場全体がFireworksへの愛にあふれてて、とても充実した１日になりました。 どのお話も面白いし、スライドもキレイでわかりやすい。 その中でも特に個人的に面白かったものをご紹介。 FireworksマニアLIVE！ スピーカーは、山口 有由希さん 今回参加
普段はコーダー業務をおこなってるのですが、デザインの知識は…。 でも、やはりデザインのスキルも大事ですよね！ なので、今年からデザインの勉強のためにバナー作成などをおこなっています。 今回は先輩デザイナーさんに教えていただいた バナー制作のちょっとしたコツを紹介していきたいと思います。 まずはバナーを作ってみよう バナーはEC studioが出展している「モニプラ」の アンケートバナーを作成してみました。 1つ目のお題は「パソコンソフトは店で買う？ネットで買う？」でした。
CSS3を使いたくても、コードを書くのがなかなか難しい。 そんなときはCSS3ジェネレーターで作成してみてはいかがでしょうか？ 視覚的に確認できるので、ちょっとした調節も簡単。 気に入った形を作成して、コピー＆ペーストでスタイルシートに貼るだけです。 ジェネレーターを使って、ぜひCSS3にチャレンジしてみてください。 複数のプロパティを作成する場合 CSS3プロパティジェネレーター http://css-eblog.com/eblog_sample/0912/css3-generator/ 日本語のジェネレーターなので英語が苦手な方におすすめ。 gradient, box-shadow, text-shadow, border-radiusを生成できます。 CSS3 Generator http://css3generator.com/ 様々なCSS3のコードを作成できます。 ほとんどが値
2010年9月25日に.coder「すこーし愛して。ながーく愛して。Webパフォーマンス」でプレゼンさせていただきました。 あまりのイケてるプレゼンテーターの中にちょっと申し訳ない感じでしたが、 みなさまアットホームに迎え入れていただき、楽しい1日を過ごすことができました。 私は「みんなで使おう！Fireworks！ 〜Fireworksで画像最適化〜」というお題で プレゼンしたので、簡単にその中身をここでも紹介させていただきたいと思います。 今回はFireworksとPhotoshopの画像の書き出し方を比較してみました。 ちなみに使用したアプリケーションはFireworks CS5 とPhotoshop CS5 です。 PNGの書き出しは実はFireworksのほうが軽量！？ PNGを書き出すときに画像データ以外のチャンクという必要のないデータも書き出されます。 実はそのチャンクデータ
Fireworks CS5 でのスライス書き出しTipsをまとめてみました。 スライスするときによく使う、使えそうな小技をご紹介します。 スライスの作成 長方形スライスの作成 オブジェクトを選択した状態で、 右クリックから「長方形スライスを挿入」を選択すると、 選択した画像を覆うスライスオブジェクトを作成できます。 複数オブジェクトを選択した場合は選択したすべてのオブジェクトの 画像を覆うスライスオブジェクトを作成できます。 多角形スライスの作成 オブジェクトを選択した状態で、 右クリックから「多角形スライスを挿入」を選択すると、 オブジェクトのパスに沿って画像を覆うスライスオブジェクトを作成できます。 イメージマップを設定するときに便利な書き出し方です。 ※テキストオブジェクトのみの場合、オブジェクトを選択した状態で、 右クリックしても「長方形スライスを挿入」と「多角形スライスを挿入」
サイトのパフォーマンスアップをしたいけど、 作業をする時間がつくれない、作業するにしても影響範囲が大きくて なかなか実行できない…ということは非常に多いと思います。 そこで、今回は簡単！すぐできるパフォーマンスアップ！ Webサイトに最適な画像形式の書き出し方法をご紹介します。 以下で書き出した画像はFireworks CS5 を使用して書き出しています。 EC studio では基本的に画像はPNG8で切り出しています。 なぜかというと、ほとんどのPNG8画像のファイルサイズがGIFより軽いことと、 可逆圧縮で透過表示もできるからです。 しかし、状況によってはPNG8以外の形式も使用します。 主に写真はJPEG、半透明の画像はPNG8、PNG32、 アニメーションはGIFに書き出します。 PNGとGIFとJPEGがどの画像で使うのが向いているか比べていきましょう。 256色以内の画像の場
この数カ月でHTML5のサイトが国内にも増えてきました。先日10周年を迎えた EC studio のサイトもHTML5で制作しています。マークアップの面でのHTML5の導入となりましたが、難しいと思う以上に勉強になることが多くありました。（今も改善を続けています。） http://www.ecstudio.jp/ 個人サイト以外でHTML5を導入するのをためらっている人が多いと思うので、今からでも使っていくためのコツやノウハウをまとめてみました。 新要素をJavaScriptで生成する HTML5の新要素はIEでは未知の要素です。そのため記述していてもDOMツリーが構成されなかったり、CSSが適用されないという問題が生じます。 そこでdocument.createElement(要素名);により、ブラウザ（ユーザーエージェント）にとって未知な存在の要素を生成し、認識させることができます。
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> /* 好ましくない例 */ これを使うことで横幅1024px以下のデバイスでアクセスされた場合に、ipad.cssを読み込むということはできるんですが、PCの場合でもこの程度の解像度のものはありますし、なおかつ利用しているブラウザが最近のものであれば、このコードを理解してしまいます。 つまり、「iPadだけ」に適用させるということは実質できないということになります。 この点はご注意ください。 デバイスの幅に左右されないリキッドレイアウトにする 前述のユーザーエージェントの話に次いで、レイアウトの話です。 iPadのデバイスとしての画面サイズはポートレート（縦向き）であれば 横
iPhone向けに最適化するための対応は慣れるまでは簡単ではないと思う方が多いかもしれませんが、WordPressではプラグインで簡単に対応できます。 今回はよく利用されているであろう3つのプラグインを紹介します。 iWPhone http://iwphone.contentrobot.com/2007/07/04/iwphone-wordpress-plugin-and-theme/ シンプルなテーマが適用されるプラグインです。 導入方法ですが、プラグインファイルはpluginディレクトリに、テーマファイルはthemeディレクトリにアップロードし、その後にプラグインを有効化するだけです。 特長ですが、とにかく見た目も仕組みもシンプルといったところです。 記事内の画像ファイルなども、記事の幅に合わせてリサイズしてくれるのですが、要素によってはその幅を超えて表示されてしまうようです。 記事内
[追記]2010/07/27 すでに販売されているiPhone4（iOS4）でサンプルを検証したところ、埋め込みで再生はできなくなっていました。iOS4のリリース以前の3GS+iOS4では可能であったことを確認していますので、仕様の変更があった可能性があります。あらためて方法が分かれば記事におこしたいとおもいます。 iPhoneのMobile SafariではHTML5が使えるというのは以前に書いた記事でも紹介したことがあるのですが、HTML5の各要素がすべて完全に使えるというわけではありません。 その中の一つであるvideo要素はマークアップ上使うことは可能ですが、いざ動画を見ようとするとQuicktimeが起動するのでvideo要素を使うメリットがほとんどありませんでした。 しかしvideo要素はOS4.0からページに埋め込まれる形で再生できるようになります。 iAdの衝撃 皆さんiA
Fireworksをもっと効率的に使いたい！ もっと便利につかえる方法はないの？と思ったことありませんか。 そんなときにはコマンドを使ってみるのはいかがでしょうか。 使いこなすと様々な作業を効率化でき、作業コストを削減することができます。 でも、コマンド機能を聞いたことない、知ってるけどあんまり使ったことない という方もいらっしゃると思います。 そこで、今回はFireworksにデフォルトではいっているコマンドと 他サイト様で公開されているコマンドを紹介していきたいと思います。 コマンドってなんだろう？ コマンドとはFireworksの作業を便利にしてくれるスクリプトです。 細かい動作をひとつずつ登録して自動処理してくれます。 コマンドを使うと手作業で時間がかかっていた作業が効率化できたり、 Fireworksでおこなった作業を保存して自分以外の人と共有できます。 コマンドってどうやって使
Fireworksをつかっていると、 「オブジェクト（パス）の整列をすると、アウトラインがぼやける！」 こんな現象がおこったことはありませんか？ しかも、一度ぼけるとCtrl+zでも元に戻らないという、やっかいなバグ。 今回は、 「整列つかってもアウトラインがぼけない！」 そんな方法をご紹介します。 アウトラインがぼけてしまうバグは、「中央揃え（センター寄せ）」を使うと 高確率でおこります。 そのため「中央揃え（センター寄せ）」の使い方を工夫するだけで バグに遭遇しなくなります。 ぼけてしまう整列の方法 整列させたいオブジェクト達をいきなり 「中央揃え（センター寄せ）」すると高確率でぼけてしまいます。 ぼけない整列の方法 整列させたいオブジェクト達を、「下揃え」または「上揃え」に整列させます。 その後、オブジェクトを「中央揃え（センター寄せ）」にします。 するとアウトラインがぼけません！
「テキスト修正してサーバーにアップしたけど、今度は改行がおかしい・・・ また作り直して、アップしなおさないと・・・」 「このテーブル、項目が増えてもレイアウトが崩れないかなぁ・・・ 検証面倒くさいなぁ・・・」 「打ち合わせ中に、この画像を削除したパターンが見たいっていわれけど・・・ 今HTMLファイルもFTP情報もないしなぁ・・・」 こんなとき、リアルタイムでWebページを編集できたら便利ですよね。 そこで紹介するのが今回の方法です。 ブラウザのアドオンやエクステンションのインストールは一切なし！ ブラウザに左右されない！（Firefox、IE8、Chrome、Opera共通） そんな便利な方法をご紹介します。 お気に入りに追加してWebページを編集する方法 下記のテキストリンクを「ドラッグ」し、 ブラウザのツールバーに「ドロップ」します。 このページを編集する ツールバーに入った「このペ
Zen-CodingでHTML/CSSコーディング作業の効率があがった人が増えてきたのではないかと思いますが、そこでさらにカスタマイズすることで効率化アップする方法を紹介します。 Zen-Codingではあらかじめ多くのHTML/CSSのショートコード、スニペットが登録されていますが、Zen-Codingを構成するファイルを少し修正するだけで、オリジナルのコードを登録することができます。 JavaScriptを触ることにはなりますが、JavaScriptを知らなくても大丈夫なぐらい簡単です。 zen_setting.jsに秘密がある Zen-Codingをダウンロードすると、対応アプリケーションごとのファイルをダウンロードすることができますが、そのダウンロードしたファイルの中にはzen_setting.jsというファイルが存在しています。 実はその中に、省略コードやスニペットがすべて書き込
次のページ
このページを最初にブックマークしてみませんか？
『EC studio デザインブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
