EC studio EC studio デザインブログ

2011年の記事一覧

今回は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)のセッションで紹介されていたもので、その斬新な技法に驚かされたと共に、日頃の制作に対する姿勢の面でも改めて感じる部分がありましたので、今回の記事では、そのあたりをまとめてみようと思います。(追記2011/10/21:コバヤシトールさんが紹介されていたのは、Titanium mobileでのアニメーションで、この記事でのサンプルは、その手法をCSSアニメーションにアレンジしたものとなります。)
続きを読む

[追記]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ページの作り方について書きたいともいます。

続きを読む

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

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

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

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

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

続きを読む

さて、今回は前回の「Fireworksで立体的なアイコンを作る方法」よりも
もっと簡単にできるアイコンの作り方です。

今回は5分で作れるアイコンのご紹介!!
…の予定でしたが、ブログ記事用に作り直したら7分ちょうどかかりました。
すみません…
操作自体は簡単なので、速い方は5分でできると思います。
ぜひ、5分に挑戦してみてください!

アイコンはこちら、建物アイコンです。

ページ下部で制作動画の紹介や、ベクトルデータのダウンロードも可能です。
会社概要の見出しなどに使ってみてくださいね。

続きを読む

2011年03月24日投稿者:新免 孝紀

Fireworksのスタイル機能でデザイン作業効率化!

Fireworks Style

Webサイトのデザインをしているときに
「あ、このグラデーションって、どういう色だったかな?」
「ここのフォントはなんだっけ?」ってことがあります。

そういう時に便利なのがFireworksのスタイル機能です。
続きを読む

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