Anyway, Ideas&Designs Our Ideas, Senses, Theories & Designs For Your Brand, Shop, Event & Bussiness
![Graphika inc.](https://cdn-ak-scissors.b.st-hatena.com/image/square/0f6d478f8587f992ff48b5435d41e21ae6532bde/height=288;version=1;width=512/https%3A%2F%2Fgraphika2024.fem.jp%2Fgraphika%2Fwp-content%2Fuploads%2F2024%2F04%2Fogp_graphika-1.png)
Anyway, Ideas&Designs Our Ideas, Senses, Theories & Designs For Your Brand, Shop, Event & Bussiness
[大阪] プログラマー向けデザイン勉強会で発表させていただきました。 http://connpass.com/event/3086/ --- [あわせて読みたい] KSSで作るパターンライブラリ by @machida https://speakerdeck.com/machida/k…
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
奥谷孝司氏株式会社良品計画 WEB事業部長駅ビルやファッションビルなどいたるところに店舗があり、生活雑貨から住宅までをも販売する無印良品。ネットストアやソーシャルメディアへの取り組みも早く、最近では「MUJI passport」というCRMアプリもリリースした。こうしたデジタル施策の中心人物ともいえる、WEB事業部長の奥谷孝司氏に、無印良品の顧客体験について語っていただいた。 ソーシャルメディアの普及以前からお客さまの意見を聞く風土がある――まず無印良品の優れた顧客体験というと、どういった要素がありますか。 私は顧客時間を気にしています。顧客時間というのは消費者行動の流れで、お客さまが検討して購入し、使用・消費する一連のプロセスのことです。そこにブランドとして入り込んでフォローすることが、顧客体験の提供だと思っています。お客さまは、なんらかの問題や課題を解決したいから買い物をするわけですよ
地形を無視してひたすらまっすぐ通っている道。これを走ってみました。楽しかった。そしてすごーくたいへんだった!(写真は三土さん撮影) 神奈川に奇妙なぐらいまっすぐな道路があるのをご存じだろうか。ぼくは知らなかったです。 その長さ20kmほど。あんまりにまっすぐなので、走破してみました。 いやあ、あんなに楽しくもしんどいとは予想していなかった。
2013/10/13 (Sunday) 「Webデザインを学びたければ、これを読め!」- 初心者でもあっという間に理解できるデザイン本5選 最近、UI・UXの重要性が叫ばれています。しかし、「デザインは特殊な知識が必要そうだし…」と遠ざけてしまっている人も多いのではないでしょうか。そういった人達のために、デザインを簡単に学べる本を5冊紹介します。 プロになるためのWebデザイン入門講座 こちらの本は、Photoshop・Illustratorを使った制作テクニックを基礎から解説してくれます。fireworksの開発が終了してしまった今、WebデザインのほとんどはAdove PhotoshopとIllustratorを使って行われています。この本を読むだけで、Web制作に必要なノウハウの基礎のほとんどを習得できるようになるでしょう。とにかく基礎を叩き込みたいという人にはオススメです。
こんにちは。デザイナーのはるえです。 もうほとんどの案件でPC+スマホ制作がセットになってきましたね。 LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。 ありがとうございます!! そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。 【こちらもおすすめ】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Facebookでもおなじみのドロワーメニュー3選 今じゃ基本中の基本となっているドロワーメニュー。 Facebookなどで使われている、横からぬるっと出てぬるっと引っ込むあれです。動きが気持ちよくて、実装も簡単にできるものを中心にまとめてみました。 jQuery slimMenu
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
オプションを変更したキャプチャ diamonds.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="diamonds.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.diamonds.js"></script> Step 2: HTML ダイアモンド状に配置する各アイテムのclassに「.item」を添え、ラッパーで包みます。 <div class="d
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね! これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり!!SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました!!! これからWebサービスを作るなら、導入したいですね!!! これpjaxを使えば簡単に導入できるんです!!!よし!!! PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること
風景写真など、普通の画像の上にグリッドを描き、各マス目をホバーした際に尾ヒレのようにフェードで追従させるエフェクトが美しいスタイルシートを紹介します。 便利になるとかそういった類いのものではありませんが、ちょっとした何かに使ってみたいですね。 JavaScript無しというのはポイント高いです。 デモのアニメーション 実際の動作は下記ページで確認できます。 デモはCSS3対応ブラウザでご覧ください、Chromeが一番美しくエフェクトを描画します。 LeTrailing Effect 実装はシンプルで、あえて難点をあげれば空divを数多く使うことでしょうか。 HTML 画像はbodyの背景で表示されているので、HTMLはグリッドを描くdivだけです。 <body> <div class="div"></div> <div class="div"></div> ... ... <div cla
フラットデザインが流行し、アイコンも操作画面もどんどんシンプルになってきた。Less is more. より少ないことは、より豊かなこと。これは建築家ミース・ファン・デル・ローエの言葉で、確かに機能美を追求すると自然とシンプルものになる。 だが、シンプルなデザインは調和が必要だ。フラットなアイコンやボタンは、それ単体では主張せず、全体でバランスを取りながら機能する。それに比べ、実物をデフォルメしたスキューモフィックスのアイコンは存在感がある。一つのアイコンが、一つのアート作品になり得る。 今回は、DribbbleにアップされているスキューモフィックのiOSアイコンを紹介したい。 Cassette Recorder iOS icon by ALEX BENDER Leica Raw Edition iOS icon by ALEX BENDER Fluid by Creativedash S
DiagnostiCSSはJavaScript製のオープンソース・ソフトウェア(MIT License)です。 Webブラウザはよく出来ていて、Web標準に沿っていなくともそれっぽく表示してくれます。しかしそれに安穏としているとレガシーなブラウザなどで表示が失敗したり、意図した動作にならないことがあります。そこでDiagnostiCSSを使ってチェックしてみましょう。 MOONGIFTで実行しました。様々な枠が表示されました。 マウスオーバーで画面上部にメッセージが表示されます。例えばonclick指定の指摘です。 かなりダメなところは赤い枠になっています。 DiagnostiCSSでは問題のあるHTML要素について枠で囲むことで問題を把握しやすくしてくれます。主にインラインスタイルやイベント属性、無効なリンク、空または廃止予定の要素、必要な属性のない要素などがリストアップされます。 HT
レスポンシブWebデザインに対応した「jquery.heightLine.js」 多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応、特定のウィンドウ幅の場合のみ高さを揃えます destroyとrefreshメソッドを追加、高さ揃えの無効化や再揃えが簡単にできます などがあります。 ダウンロード / サンプル / GitHub 利用方法 まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。 <script sr
こんにちは、デザイナーのタカハマです。「キーカラーは決まったけど、色数を増やすと変になる…」「いつも色選びがワンパターン」「色相環ってどうやって使うの?」そんな色選びのお悩みをズバっと解決するかもしれない、配色のコツをご紹介します。また、キーカラー選びの段階から悩んでいる方は、前回の記事(色の基礎知識と色彩心理)が役に立つかもしれませんので、あわせてご覧ください。 「ジャッドの色彩調和論」と配色のための3Step ひとくちに配色理論と言っても、ニュートンやゲーテに始まり多くの学者や画家がそれぞれの持論を展開してきており、これが正しいというものはありません。今回は、その中でも20世紀半ばまでの先人たちの色彩調和論を”4つの原理”にまとめた「ジャッドの色彩調和論」に焦点をあて、配色のための3Stepをご紹介します。 (本記事の内容に明らかな間違いがあれば、ご一報いただければ幸いです。) Ste
前回は第3章までご紹介しました。今回はデザインを最終的に完成に持って行くためのブラッシュアップに書こうと思います。 UIデザインをするための5つの工程 ロード第1章 スタディ ロード第2章 モックアップ ロード第3章 仮組デザイン ロード第4章 ブラッシュアップ ロード第5章 なんでもないようなことが幸せだったと思う 前回の仮組デザインがスムーズにいっていれば完成は間近です。ここからは最終的な「モノとモノの適切な距離感」を目で計りながら微調整を行います。この項は全体的に感覚的な話しが多いですがロジックで情報デザインを組み上げた後はノンバーバルでの良さを感じれるデザインを目指しましょう。 デザインに空気を流して全体チェック レイアウトしたオブジェクト(写真、文字、イラストなど)が適切な間隔で配置されているかの確認を行います。優秀なIAの書くワイヤーフレームなどであれば要素毎のマージンをピクセ
新郎新婦には内緒で、「ご結婚おめでとう」の「声」を集めたい。 みんなからのナマの「声」をどうにかして録音することはできないか。 それらを、記念の刻印入りの iPod shuffle にいれてプレゼントできないか。 ―――そんな秘密の企画がひっそりとはじまりました。 Twilio(トゥイリオ )というクラウド電話APIサービスでやってみよう! という計画を思いついたのは @darashi @june29 @hmsk のプログラマの3人でした。 Twilio(トゥイリオ )って何? Twilio(トゥイリオ )というのは、クラウド電話APIサービスのことで、 プログラミングで電話システムを作れるのだそう。 電話というツールで、何かシステムを作る。なんだかよくわからないけれど、 わくわくする遊びがはじまったんだ、ということだけは私にもわかりました。 そんなある日、@hmsk さんから Ruby
IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値(read-only) false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ
擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
vertical-alignプロパティは、行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用します。 vertical-alignプロパティを適用できるのは、インライン要素とテーブルセルです。ブロックレベル要素には適用できません。 ■値 baseline 適用した要素のベースラインを親要素のベースラインに揃える(初期値) top 上端揃え middle 中央揃え bottom 下端揃え text-top テキストの上端揃え(テーブルセルへの指定は無効) text-bottom テキストの下端揃え(テーブルセルへの指定は無効) super 上付き文字(テーブルセルへの指定は無効) sub 下付き文字(テーブルセルへの指定は無効) パーセント(%) その要素のline-heightプロパティの値に対する割合を%で指定(ベースラインが揃った状態を0として、正の値なら上、負の値なら
インターン生は、連日の講義と課題で大変そうですが、今日も講義が続きます。 本日は、id:nanto_viによる「ユーザインターフェース,HTML5」です。仕様書を隅々まで読んだ講師によるディープな講義内容となっています。今日も2時間の長丁場ですが、頑張って着いていきましょう! ユーザーインターフェース、HTML5 ユーザーインターフェースで大切なこと、HTML5 及び関連 API で何ができるか 自己紹介 nanto_vi (外山真, TOYAMA Nao) ブックマークチーム アプリケーションエンジニア はてなブックマーク Firefox 拡張 はてなツールバー for Firefox はてなブックマーク Twitter 投稿機能 はてなサマーインターン 2008 なんとなく Emacs 富山県南砺市とはあまり関係なし 概略 UI の評価・設計・実装の概略 HTML についての概略、HT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く