EC studio EC studio デザインブログ

2012年03月02日投稿者:赤堀 巴絵

タイムライン対応!新Facebookページのデザインのコツ!

2012年3月1日からFacebookページにタイムラインが適用されるようになりました。
3月30日には全Facebookページが強制的に新デザインに切り替わるので、
今のうちにデザインを修正して対応しちゃいましょう!

新デザインの変更箇所まとめは、いろんなブログで紹介されているので、
今回は、デザイナー視点での、新デザインへの対応のコツをまとめました。
続きを読む

2012年01月06日投稿者:yoshue

Fireworks 「パス」パネル早見表

デザインしている中で、パスを合体したり分割したり
パスを変形させることは多いと思います。

変形させるとき、多くの方は「パス」パネルを使用すると思いますが、
アイコンだけ並んでいても、どれがどんな働きをするのかわからなくなることはありませんか?

アイコンの絵でなんとなく合体する…くりぬかれる…と、動きは予想できますが
どちらのパスが前面・背面にあるかで、またさらに形が変わってきます。

今回はそんなちょっと迷う「パス」パネル、
Fireworksでいう「パスを連結」部分の早見表をつくったのでご紹介します。

続きを読む

2011年11月15日投稿者:赤堀 巴絵

擬似要素(:before・:after)を使ったbox-shadowのエフェクトでデザインアクセント!

今回はESET mac版の公式サイトで使用した擬似要素(:before・:after)を使ったbox-shadowのエフェクトを紹介していきたいと思います。

ESET Cybersecurity(イーセット サイバーセキュリティ)
ESET Smart Securityのサイトでデザインアクセントとして実装しています。(2011/11/15現在)

続きを読む

2011年10月20日投稿者:西口 誠二

CSSアニメーションで一見複雑に見える動きをさせる方法

Webサイトにアニメーションを取り入れる場合には、いくつか方法があると思います。代表的なところでいうと、

  • ・JavaScript、jQuery
  • ・Flash
  • ・CSSアニメーション

などが挙げられます。

ただ複雑な動きとなると、高度なコードを書く必要があったりと、それなりに難しくなります。ですが、シンプルなアニメーションでも組み合わせることで、パッと見複雑に見える動きを付けることができます。
そのアニメーション手法というのは、先日、京都で開催された”Ti.Developers.meeting vol.03(Titanium mobileでのアプリ開発者が集まる関西方面のミートアップ)”でのコバヤシトールさん(@toru0325 / もぐもぐエンターテイメントアプリ – MogSnap)のセッションで紹介されていたもので、その斬新な技法に驚かされたと共に、日頃の制作に対する姿勢の面でも改めて感じる部分がありましたので、今回の記事では、そのあたりをまとめてみようと思います。(追記2011/10/21:コバヤシトールさんが紹介されていたのは、Titanium mobileでのアニメーションで、この記事でのサンプルは、その手法をCSSアニメーションにアレンジしたものとなります。)
続きを読む

2011年08月24日投稿者:西口 誠二

Facebook コメントプラグインをWordPressに設置する手順とコメントを管理する方法

[追記]2010/08/25
本記事投稿時には、コメントの通知が受け取れないと書いていましたが、FacebookアプリケーションとWordpressのFacebook Comments for WordPressを紐付けておけば、Facebook側のComment Moderation toolにmoderatorとして登録したユーザーにはコメントのお知らせが通知されるようです。

突然ですが、Facebook活用していますか?
弊社ではFacebook活用の一つとして、先日社長ブログにFacebookコメントを設置しました。

しかし設置したまでは良かったのですが、このFacebookコメント、新しいプラグインになってから新着コメントの通知ができなくなったようで、せっかくコメントをいただいても見逃してしまう、何かいい方法はないのか!となりました。

そこで、今回は弊社でおこなっているコメント管理方法を、Facebookコメントプラグインの設置手順を交えて紹介しようと思います。
続きを読む

2011年07月04日投稿者:西口 誠二

海外展開に向けたWebサイト制作のポイント

2011年6月28日、この日はEC studio にとって記念すべき1日となりました。
と言いますのも、弊社で提供しているクラウドベースのビジネスチャットツール「ChatWork」の海外サービス展開がスタートした日だからです。

デザイン部はこのプロジェクトでは主に「チャットワークツールのUI設計と実装」、「Webサイトの企画・制作」を担当しました。

しかしEC studio では海外展開がはじめての試みであったため、今回はシリコンバレーにあるグローバル展開サポートやWebサイト制作などをおこなっているbtraxさんに海外展開を目指すWebサイト制作のアドバイスをお聞きしました。

そこで今回の記事は、そのアドバイスをもとに、海外のWebサイトをいくつか研究して参考になりそうだと感じたポイントをまとめておくことにします。

続きを読む

2011年07月01日投稿者:赤堀 巴絵

今から作るiFrame対応Facebookページの作り方 Part.2

iFrame版Facebookページの作成方法としては

  • ・デザインを作成する
  • ・アプリ開発者登録をする
  • ・コーディングをおこなう
  • ・htmlをサーバーにアップする
  • ・iFrameページ用のFacebookアプリを作成する
  • ・FacebookページにFacebookアプリを追加する

をおこなっていきます。

デザインの作成に関してはPart.1の記事を参照してください。
以下では開発者コードの取得から記述していきたいと思います。

続きを読む

2011年06月30日投稿者:新免 孝紀

今から作るiFrame対応Facebookページの作り方 Part.1

最近は、企業や製品・サービスなどで
Facebookページをもつことが増えてきています。

EC studio でも先日チャットワークのFacebookページをリリースしました。
チャットワーク(ChatWork)のFacebookページ

そこで、今回はFacebookページの作り方について書きたいともいます。

続きを読む

2011年03月30日投稿者:西口 誠二

WebサイトをiPhoneに対応させる -レスポンシブ・ウェブデザイン-

このところのスマートフォンの広がりにより、デザイン部でもWebサイトのスマートフォン対応の必要性をひしひしと感じています。

実際のスマートフォン対応の取り組みとしてはこれからなのですが、その時のために従来のサイトをスマートフォンに対応させる方法、特に今回は閲覧環境に応じてページレイアウトを柔軟に切り替える、レスポンシブ・デザイン レスポンシブ・ウェブデザイン(Responsive Web Design)(ご指摘ありがとうございます。)に関していまさらながら調べてみたので、大枠的なことをふわっとまとめておこうと思います。
続きを読む

2011年03月29日投稿者:赤堀 巴絵

Facebookのウォールでちょっとアピールする方法(OGP)

サイトに設置した「いいね!」を押したとき、
タイトルとテキストだけではちょっと物足りない感じがしませんか?

OGP(Open Graph protocol)の対応をおこなうだけで、
ウォールが少し華やかになります。
弊社サービスサイト「チャットワーク」で対応した時におこなった対応方法を紹介したいと思います。

弊社サービスサイトのOGP対応後

続きを読む

全 13 ページ 12345678910最後 »
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.