サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
www.coprosystem.co.jp
長年にわたり、UXの研究・教育をされている安藤昌也教授。今年から弊社のBrandux Design部門へ顧問としてお迎えし、UXデザインのセミナーやワークショップを開催しました。そんな通称UX王子こと安藤教授とBrandux Designリーダーの大久保がUXデザインの観点から、これからのブランディングについて対談しました。 安藤 昌也 千葉工業大学 先進工学部 知能メディア工学科 教授 総合研究大学院大学文化科学研究科メディア社会文化専攻修了。博士(学術)。ユーザエクスペリエンス、人間中心設計、エスノグラフィックデザインアプローチなどの研究、教育に従事。人間中心設計およびアクセシビリティの国際規格に関するISO/TC159(人間工学) 国内対策員会委員。人間中心設計に関するJIS規格の原案作成委員長を務める。また、NPO法人 人間中心設計推進機構(HCD-net)理事等を歴任。同機構認定
【jQuery】簡単!Flashのようなタイムラインアニメーションを実現するテクニック(レスポンシブ対応) こんにちは、UXデザイン室の松山です。 好きなスタンドは、パープルヘイズです。 前回のTips*Blogでは「背景画像の複数設定と:before、:afterを使ったレスポンシブCSSテクニック」を説明しました。 今回は、jQueryでFlashのタイムラインのように順番にアニメーションを実行するテクニックを説明します。 最近ではFlashを使用しているサイトはほぼ見なくなり、アニメーションならjQueryやCSS3で再現しているサイトがほとんどですが、お客様にむかし流行ったFlashで作るオープニングムービーのようなものを依頼された時にどうやって実装すればいいのか悩んだことはないでしょうか? そんな時に使えるテクニックをご紹介します。 今回作成したサンプル まずはサンプルをご覧くだ
こんにちは、UXデザイン室ディレクターの石川です。 さて、最近海外のAwardサイトを見ていると、サイトTOPのヒーローエリアにオリジナルの手描き文字を使って大胆にレイアウトデザインをしているWebサイトをよく見かけます。 フルスクリーンサイズのクオリティが高い写真イメージの上ではよく映えます。 画一的なフォントではなく、アーティスティックな手描き文字。個性的なデザインになりカッコいいです。 というわけで、今回は「ヒーローエリアで手描き文字を大胆に使っている、アートなイケてるWebデザイン」と題して、いくつかサイトをご紹介します。 (この記事の情報は、2015年7月16日時点の情報です) Alexander Engzell http://engzell.me/ BLITZ http://www.blitzagency.com/ delaBanda http://delabanda.com/
こんにちは、UXデザイン室の松山です。 最近、クジラのトイレマットを衝動買いしました。 前回のTips*Blogでは「マウスホバーでアコーディオンさせた要素の中で動画を再生する方法」を説明しました。 今回は、アニメーションではなくレスポンシブサイトで使えるビギナー向けの簡単なCSSテクニックを紹介します。レスポンシブって何?という方は、UXデザイン室の石川室長が書いた大人気の過去記事「レスポンシブwebデザインとは?」をご覧ください。 レスポンシブサイトを構築する際に、デザイナーさんからあがってきたデザインを見てどのようにコーディングするか悩む事も多いかと思います。そんな時に知っていると便利なCSSテクニックを紹介します。 今回は下記のような黒板のデザインを実際にレスポンシブでコーディングしてみました。 ちなみにこちらのGIFアニメは、Chrome拡張機能Animated Gif Capt
こんにちは、UXデザイン室の松山です。 中学生の時のアダ名は「しょくぱんマン」と「青ジョリ」でした。 理由は色白なのとヒゲが濃いからです。2つのあだ名の割合は、ハーフハーフです。 さて前回のTips*Blogでは、jQueryで「卵をゆらゆら揺らす方法」を説明しました。 今回は、HTML5のvideoタグを使用し、マウスホバーでアニメーション(アコーディオン)した要素の中で動画を再生する方法を説明します。サンプルはjQuery版とCSS3版の2つ用意しました。 videoタグの再生・停止などの制御部分はCSS3版もjQueryを使用しています。 最近では動画を背景で再生させたりするサイトも多くなりました。 HTML5のvideoタグを使用すると動画の制御が凄く簡単なので覚えておくとかなり役に立つと思います。 今回作成したサンプル 【jQuery版】サンプルはこちら 【CSS3版】サンプルは
こんにちは、UXデザインの松山です。梅雨入りでジメジメしてキノコが生えそうですね。 ちなみに、キノコの中では「なめこ」が一番好きです。 今回、Tips*Blogの更新2回目となります。1回目は「ストリートビューの道案内」をご紹介しました。今回はjQueryと要素を回転させるプラグインを使用したアニメーションのテクニックをご紹介します。 jQueryのプラグインである「jQueryRotate」を使い卵をゆらゆら揺らすアニメーションを作ってみましたので、そのやり方を解説します。 WEBサイトで卵を揺らすという機会はほとんどないと思いますが、覚えておけば何かの役に立つ時が来るはずです。 現在、WEBで簡単なアニメーションというとCSS3が主流だと思いますが、今回はjQueryでの実装方法をご説明します。 今回作成したサンプルはこちら 今回の内容 一定間隔で複数の卵を別々にアニメーション クリッ
こんにちは、コプロシステム・UXデザイン室の新人、顔が長いのをヒゲでごまかしている松山です。 まだ5月というのに真夏日が続いているおかげでビールがとても美味しいですね。 ちなみに私はビールが苦手です。 さて、5月になり新入社員の皆さんも仕事に慣れてきた頃で、営業職の皆さんはお客様先へ訪問することも多いかと思います。 訪問するお客様のホームページで交通アクセスなどのページを見てから現地へ行くことがほとんどかと思います。交通アクセスページで使われる地図も、一昔前はイラスト画像を使うことが主流でしたが、今ではGoogle Mapを使うことがあたりまえになってきています。 そんな交通アクセスのGoogle Mapにストリートビューの道案内が加わったらさらに親切だと思いませんか? 今回は「Google Mapとストリートビューを使用した道案内の作り方」を説明します。 今回作成したサンプルはこちら 今
もう移行は済んだ?「Like Box」に代わるFacebookの新しいプラグイン「Page Plugin」の設置方法やポイントまとめ こんにちは、コプロシステム・UXデザイン室 ディレクターの石川です。 企業のマーケティング活動におけるツールのひとつとしてFacebookの"Facebookページ"を導入することは今や珍しくなくなっています。 それと同時に、Facebookページの存在やそこからのコンテンツ発信を認知させたり、そのファン化を促すことができるFacebookのプラグイン「Likeボックス」(下図参照)をWebサイト上で見かけることも多くなってきました。 そのプラグイン「Likeボックス」ですが、来る2015年6月23日(火)にサービスの提供が終了となるのはご存知でしょうか? https://developers.facebook.com/docs/plugins/like-b
あなたのWebサイトの「いいね!」ボタンは大丈夫?古いコードの「いいね!」ボタンは2015年5月以降に動作しなくなるので要注意! こんにちは、コプロシステム・UXデザイン室 ディレクターの石川です。 このブログ記事をご覧いただいている方の中には、Webサイトの運営を担当している方も多くいらっしゃると思います。 さて、そのWeb担当の方に質問です。 皆さんが運営しているWebサイトに設置してあるいいね!ボタン、いつ頃設置したか覚えていますか? 2014年4月以前に設置したいいね!ボタンは、2015年5月以降動作しなくなります いいね!ボタンはボタン単品だと動作しません。 いいね!ボタンなどFacebookのプラグインを有効にするために、下記のコードをHTML上(bodyタグ開始直後)に記述する必要があります。 2014年4月以前にいいね!ボタンを設置した場合は、このコードの5行目に「all.
朝起きて、コーヒーメーカーをセットし、テレビのスイッチをオンにします。iPad miniを手に取り、ニュースキュレーションアプリを立ち上げ、テレビのニュース番組を見ながら情報を仕入れます。気になった情報はTwitterでつぶやき、同時にfacebookにも投稿。テレビのニュースで面白い話が始まればそちらに目を移し、気になったらTVの画面をiPhoneで撮影します。通勤時間が来て家を出たら片手にはiPhone。通勤途上にTwitterのタイムラインをチェックし、気になった情報はリツィート。誰かが面白そうな本の紹介をしていたら電子書籍をその場で購入し、すぐに読み始めます。これが私の標準的な朝の情報行動です。 私だけに限った話ではなく、私たちがスマートフォンやタブレットなどのスマートメディアを手に入れてから、メディアへの接触や購買行動が変わった人達も多いと思います。ニールセン株式会社は「ニールセ
自分のツイートはどれくらい見られてる?一般公開されたツイート分析ツール「Twitterアナリティクス」の使い方を解説 こんにちは、コプロシステムWebデザイングループのディレクターの石川です。 先週の8月27日(米国時間)・Twitterが、"ツイートにどれくらいの反応があったか"などがわかるツイート分析ツール「Twitterアナリティクス」を一般ユーザーに対しても公開しました。 今までは、一部企業・著名人などの認証アカウント/Twitterカードを利用しているアカウント/広告主のアカウントユーザーに限定提供されていた同ツールですが、それが一般ユーザーにも公開されたので、様々なメディアに取り上げられ世界的に話題になりました。 現在、開設後14日以上経過したアカウントであれば、英語・日本語・フランス語・スペイン語ユーザーに順次提供していて、今後はその他の言語にも拡張予定とのことです。 Twi
【顧客の経験価値を可視化する】 顧客にとっての商品価値とは、商品そのものの価値だけではありません。その商品を購入する前後のプロセスや、利用時に顧客が体験する「心地よさ」「驚き」「感動」などの価値まで含まれています。そのような総合的な顧客価値の提供を図るマーケティングの考え方を「経験価値マーケティング」と呼びます。 「経験価値マーケティング」の考え方は、コロンビア大学ビジネススクールの教授バーンド・H・シュミット教授によって1999年に提唱されました。この考え方は、近年、ブランディングや商品のサービス化、WebやソフトウェアのUXデザインに多くの影響を与えてきました。「スターバックスはコーヒーというモノだけを売っているわけでは無く、顧客によって心地よい、家庭でも職場でも無い『第3の場所』で過ごすという経験を売っている」というのはよく語られるたとえ話ですが、このあたりも「経験価値マーケティング
スタンフォード大学に「d.school」というクラスがあります。いま最も成果をあげている授業を行うことで注目を集めています。そこで学生たちが学んでいるのが「デザイン思考」です。「d.school」には「デザイン思考」を用いた非デザイナーのための問題解決ツールが数多く用意され、そこで学ぶ学生達がワークショップ形式で、そのツールを活用した「デザイン思考」の体験を重ね、成果を上げています。 「デザイン思考」とは、人間中心のデザインプロセスのことで、「共感」「問題定義」「創造」「プロトタイプ」「テスト」の5つのステップによって構成されています。「人間中心」という考え方のスタートは「ユーザー」の理解にあり、そのためには「ユーザー」に深く共感することが必要だとされています。従って「デザイン思考」のツールは、人間の行動観察によって得られた知見を可視化し、共有し、集合知として活用していくために用意されてい
こんにちは、コプロシステムWebデザイングループのディレクターの石川です。 7月初旬に、Webサイトに使われるボタンパーツのトレンドとして「ゴーストボタン」というワードを知りました。 どういうものかというと、背景が透明(半透明)のボタンで、フルスクリーンの写真や動画を使用しているWebサイトなどでよく見かけるシンプルなパーツです。 見かけてはいたものの、名前があることをその時初めて知りました! 調べてみると、海外のブログでは4月・5月くらいからエントリーが書かれ始めていたようです。 そして、この「ゴーストボタン」、改めて意識して各サイトで操作をしてみると、実に色々なアイデアのインタラクションの種類が実装されていました。 というわけで、今回は『ゴーストボタンに使われているインタラクションの種類とその事例』というテーマで、特徴やメリット/デメリットも交えながら書いていきます。 ゴーストボタンと
こんにちは、コプロシステムWebデザイングループのディレクターの石川です。 「7月では最大クラス」の台風が迫ってきてますね。不要不急の外出は避けて...とのことだったので、皆さんも気をつけてください! さて、皆さんがいつも見ているネット上のニュースやブログ記事に、必ずと言っていいほど設置されるようになってきた「いいね!」ボタン。逆にないと違和感があるくらい、定番化してきましたよね。 自分のライフログ的に使いたい時、友達にシェアしたい時など、いろいろな場面で使えて便利です。 その「いいね!」ボタンの右横や上に、吹き出しで表示されている数値。 数値が多ければ多いほど、たくさんの人が「いいね!」と言っていて人気があるコンテンツなんだな~というのが分かります。 私もイチ発信者として、自分の書いた記事に「いいね!」がたくさんつくと嬉しくなります。 でも、この数値って、単に「いいね!」ボタンが押された
こんにちは、コプロシステムWebデザイングループのデザイナー早水です。 これまで「紙デザイン・ベクター作成はIllustrator、画像編集・WebページデザインはPhotoshopで」という常識がありました。(今回の記事ではFireworksを除きます) しかし、ここのところWebデザインだってIllustratorで!という人が結構増えたのではないでしょうか? そんな大のIllustrator派のひとりとして今回は"WebデザインをIllustratorでつくる理由"と"設定方法"について書こうと思います。 そもそもなぜWebデザインにはPhotosopだったのか WebデザインにおいてIllustratorがあまり好まれない理由の1つとして、 Illustratorはもともと印刷物をつくる為に生まれたツールなのでベクター画像を中心に扱う為、ビットマップ画像中心のWebとの相性があまり
FacebookページのUIがもうすぐ新デザインに!6月13日に切り替わるので主な変更点をまとめてみました こんにちは、コプロシステムWebデザイングループのディレクターの石川です。 6月に突入しました!2014年前半・最後の月も、ジメジメとした梅雨に負けず、気合いを入れて業務に取り組んでいきたいものですね! さて、つい先日、弊社・Facebookページ(以下、FBページ)を操作していると下記の案内メッセージが表示されました。 「新しくなったページをご利用いただけます このページは6月13日に自動的に新デザインに切り替わります」 その歴史が始まってから幾度となくUIデザインや仕様・機能が変更されてきたFBページ(旧ファンページ)ですが、今月、UIが新しいデザインに変わります。 今年の3月に「Facebook for business」で公式発表があり、5月に入ってからも解説するブログ記事を
OGP設定がしてあれば10分で設定完了!ツイートをより魅力的にしてくれる「Twitterカード」の設定方法 こんにちは、コプロシステムWebデザイングループのディレクターの石川です。 大荒れの天気になりそうでしたが、晴れ間が見えてきたGW、いかがお過ごしですか? 遅ればせながら、弊社コーポレートサイトにも「Twitterカード」の設定をしましたので、今回の記事ではその設定方法をわかりやすく解説します。 これから設定する方は、是非参考にしてみてください。:) Twitterカードとは? URLリンクが含まれたツイートについて、ページのタイトル/サマリー文章/サムネイル画像などそのページの詳細情報をリッチに表示してくれるTwitterの機能のことを「Twitterカード」といいます。 下のようなツイートを見たことがありませんか? 2012年6月からスタートした機能で、ご存じの方・すでに導入して
こんにちは、コプロシステムWebデザイングループのディレクターの石川です。 先日、Facebook広告で、「Crevo(クレボ)」という"アプリやサービスを紹介するアニメーション動画をクオリティ高く・安価で作れる"クラウドソーシングサービスを見つけました。 このサービスは、アプリやWebサービスなどデジタル系に限らず、ワインメーカーや、不動産会社、配送サービスなどなど、国内・海外問わず様々な"サービス"の紹介動画の実績を持っているサービスです。 サービス紹介動画やアプリ紹介するための動画制作を手軽に | Crevo[クレボ] 私はWebディレクターなのでWebサービスやアプリに焦点を当てると、たしかに最近たちあがるWebサービスやアプリのランディングページでは「動画」がアツくて、サービス紹介動画をYoutubeやVimeoにアップするのは珍しくなくなってきていますし、TOPページの1stビ
InstagramやFlickrも!主要なソーシャルメディア×12種類の、コンテンツを外部サイトに埋め込む方法・まとめ最新版(2014年3月) こんにちは、コプロシステムWebデザイングループのディレクターの石川です。 当ブログで以前、"Facebook上の投稿コンテンツを外部サイトに埋め込めるようになった"という内容の記事を紹介させていただいたことがあります。 その記事では、Facebookの他に、Twitter、Youtube、SlideShareといったソーシャルメディアのコンテンツを外部サイトに埋め込む方法を紹介しました。 人々がソーシャルメディアを利用することが当たり前になっている昨今、同時に企業がWebサイトというメディア以外にソーシャルメディアをビジネスに活用することも当たり前になってきています。 さらにその影響から、既存のWebサイトというメディアと、ソーシャルメディアを結
こんにちは、コプロシステムWebデザイングループのディレクターの石川です。 1/9以来、かなり久しぶりになってしまいました今回の記事は、「シングルページ・デザイン」をテーマにしたまとめです。 「シングルページ・デザイン」とは、Webサイトを閲覧する時に、ページを遷移して閲覧する従来のスタイルではなく、1ページで完結(または、ほぼ完結)しているデザインスタイルのことです。 スマートフォンやタブレットが普及してきた現在ならではの手法なのではないでしょうか。 ここ2~3年、海外の先進的なデザインを取り入れているWebサイトなどからこのデザインスタイルが増え始め、私がトレンドとしてすごく実感したのは昨年下半期くらいからでした。 昨年下半期に、日本国内で新規に立ち上がるWebサービスを見ていると、TOPページのレイアウトを「シングルページ・デザイン」にしているサイトの割合がかなり高い印象だったのです
Webサイトにも取り入れたい!2014年のトレンドカラー「Radiant Orchid(ラディアント オーキッド)」 当ブログをご覧の皆様、明けましておめでとうございます。 コプロシステムWebデザイングループのディレクターの石川です。 本年も、弊社コプロシステムと、この「Tips*Blog」を宜しくお願い致します。 さて、2014年最初の記事は、「2014年のトレンドカラー」についてです。 昨年の12月16日、色見本帳をはじめとした色に関わるサービスやライフスタイル商品を提供している米Pantone(パントン)が、2014年のトレンドカラーを発表しました。 これは、Webだけに限らず、ファッションやプロダクトデザインなど全体を通した2014年のトレンドカラーを決めた ということです。 その色は、「Radiant Orchid(ラディアント オーキッド)」という名前の色。 「ラディアント」
こんにちは、コプロシステムWebデザイングループのディレクターの石川です。 Webサイトをデザインする際の最も重要なファクターの一つとして、「配色」があります。 デザイナーはもちろんのこと、ディレクターなど指示を出す人、仕事を依頼するクライアント側の人、など様々な立場があるので程度の差はあれど、Webサイトの制作に関わったことがある人なら必ず一度はその「配色」を考える経験をしたことがあるのではないでしょうか。 今回の記事は、日ごろWebデザインアワードなどのギャラリーを見ている中で、華麗な配色テクニックが印象に残っていた、最近の美しいWebサイトばかりを集めてみました。 パララックスを取り入れていたり、様々なアニメーションの仕掛けが組み込まれていたり、背景で動画が再生されていたりと、どれも配色以外の部分にも注目したいサイトばかりです。 各配色を調べカラーコードもまとめてみましたので、是非チ
「いいね!」ボタンがデザインリニューアル、「シェア」ボタンの復活 など最近のわりと大きめなFacebook仕様変更まとめ(2013年11月) こんにちは、コプロシステムWebデザイングループのディレクターの石川です。 今月11月に入って、Facebookに関するわりと大きめな仕様変更のニュースをいくつか目にしました。 1つ目は、「いいね!」ボタンがデザインをリニューアル 2つ目は、「シェア」ボタンが復活 3つ目は、Facebookページへのレーティング機能の追加 どれもなかなか重要な内容なので、今回の記事はこれらについてのまとめをお届けします。 仕様変更①:「いいね!」ボタンがデザインをリニューアル この仕様変更は、かなり大きなニュースになってました。多数のメディアで取り上げられていたので、ご覧になった方も多いのではないでしょうか? 新しいボタンのデザインはこちら↓ トレードマークの"サム
こんにちは、コプロシステムWebデザイングループのディレクターの石川です。 先日...といってももう2週間経ってしまいましたが、11月1日(金)に日本印刷技術協会(JAGAT)様の「印刷会社のためのWebデザイン2013」というセミナーで講師として登壇させていただきました。 内容は三部構成で、 2013年 Webデザインのトレンドを振り返る(石川担当) jQueryの基礎とデザイン事例(株式会社まぼろし 西畑 一馬さんご担当) UIデザインの基本とスマホ・タブレット対応(クックパッド株式会社 池田 拓司さんご担当) という、私以外のお2人は本の執筆やブログなどで超がつくほど有名な方々なので、セミナーでご一緒になれて誇らしいというか。非常に嬉しかったです:) →セミナーレポートはこちら 私は上記の通り、「2013年 Webデザインのトレンドを振り返る」というテーマで話をさせていただきました。
こんにちは、コプロシステムWebデザイングループのディレクターの石川です。 先日、世界中のインフォグラフィックを検索・閲覧・共有・作成までもができるインフォグラフィックのポータルサイト「visual.ly」を見ていたところ、↓こんなインフォグラフィックを見つけました。 Adaptive Web Design vs. Responsive Web Design 内容は「AWD(Adaptive Web Design)とRWD(Responsive Web Design)の比較」というものでした。 「レスポンシブWebデザイン」については、このTips*Blogでも何回か取り上げていますし、弊社サイトでも使っている技術なので重々承知している内容だったのですが、「アダプティブWebデザイン」は耳にしたことがあるくらいの知識レベルだったので、これを機に調べてみました! 「Adaptive」ってどう
こんにちは、コプロシステムWebデザイングループの早水です。 今回は、以前のエントリー『ブログのタイトルロゴを設置したので、「ロゴ制作の手順」を具体例と合わせて解説』で、「ベクター化します」「ベクターデータだから」などと、あっさり端折ってきた、Illustratorの基本中の基本「ベクターってなに?」から「具体的なパスの描き方」について改めて書こうと思います。 これから始める方や、初心者の方、デザイナーでなくとも興味があるよ という方は読んでみて下さい。 ベクター画像ってなに? 「ベクター画像(ベクトル画像)」とは、Illusutratorのような「パス」という点の座標とそれを結ぶ線などのデータによって構成された画像のことです。 パスで作られたデータは「拡大縮小してもグラフィックが荒れない」「変形処理が簡単」「綺麗な形が簡単に描ける」などの特徴があります。 けれど、「パス」は細かくなればな
はじめまして、コプロシステムWebデザイングループ・デザイナーの早水と申します。 これまでの記事内にも名前だけこっそりと登場していましたが、今回から私もTips*Blogを執筆することとなりました。 グラフィック制作のちょっとした小技(Tips)などを中心に書いていこうと思いますので、今後ともどうぞよろしくお願いします。 さて、先日『ブログのタイトルロゴを設置したので、「ロゴ制作の手順」を具体例と合わせて解説』というエントリーで、「夢見る広報室」を例に具体的なロゴデザインの制作手順をご紹介しました。 ここTips*Blogのタイトルロゴも同様の手順で作成していて、 技術的なコツや便利な技を紹介する ↓ 人が何かを作る というイメージで「手書き風」をテーマにデザインしています。 ただ、この「手書き風文字」というのは見た目のラフさとは裏腹に、いざ作ってみるとなかなか思うようにならなかったり、読
次のページ
このページを最初にブックマークしてみませんか?
『株式会社コプロシステム|株式会社コプロシステム』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く