リアルなデザインについていろいろ考えてみた。｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは、先日の3連休ほとんど引きこもってDVDで映画を見漁っていた小林です。 唯一出かけたといえば、アミューズメント施設であるウェアハウス川崎店（公式サイトはこちら）に行ってきました。 実はここ、100年もの間香港に存在した魔窟といわれた九龍城砦をモチーフに建てられていて、ネットでも反響呼んでいる巨大アミューズメント施設なのです。 何がすごいかというとその圧倒的なクオリティです!!!! 行ったのが夜だった上、店内は撮影禁止ということで写真は撮っていないのですが、建設を手がけた会社のサイトや取材したサイトがあるので是非ご覧下さい。 ↑こちらは本物の九龍城砦の外観です。ここに約33,000人が住んでいたといいます。 店内どうですか？スゴくないですか？？一体どんだけ手間をかけているのやら… 好きな映画No.1が香港ノワール「男たちの挽歌」の僕は感動もひとしおでした…。 トイレとか本当にすごか
アプリアイコンってどんなのが良いの？ アップル直々のまとめ
アプリアイコンってどんなのが良いの？ アップル直々のまとめ2013.07.17 19:00 福田ミホ 数あるアプリの実績を踏まえて。 良アプリ、人気アプリのデザインに、目を引く印象的なものが多いのは、たまたまじゃありません。アプリアイコンは一見ただのカラフルなタイルみたいですが、そのデザインはアプリ全体にとってすごく重要で、ユーザーがそのアプリをどう思うか、使いたいかといったことに大きな影響を与えているんです。 そんなアプリのアイコンがどんなデザインであるべきか、アップルが直々にまとめてくれました。先週、アップルは今年のWWDCのデベロッパーセッションを元にした動画群を公開していました（訳注：現在は削除されている模様）。そこにまとめられたものの多くは、普通の人にはほとんど興味が持たないようなデベロッパー的な深過ぎる知見だったんですが、その中にiOSにおけるデザインのベストプラクティスがまと
すでに地図の範疇を超えている!? 新「Yahoo!地図」の便利機能を徹底解説 - ライブドアニュース
2013年7月16日 10時30分 by ライブドアニュース編集部 ざっくり言うと 記事では、新しくなった「Yahoo!地図」の便利機能を解説している 「航空・衛星写真」「鉄道路線図」など、地図の表示を全11種類から選ぶことが可能 雨雲レーダーやエリア情報など、独自の使える機能が満載だという 歴史をひも解けば、「文字」以前から人類のコミュニケーションツールとして存在していたといわれる「地図」。その本来の役割は、“現在地の把握”と“目的地までのエスコート”ということがいえます。 「地図」は誰もが備える必須ではあるものの、お気に入りのをガッツリ使っているとなかなか他のに目がいかなかったりしませんか？ 今回「『Yahoo!地図』が今スゴイ！」という情報をキャッチしたので、その機能を徹底的に使ってみました。 すると他のにはない最新の独自機能を含め、デジタルならではの“使える”機能が満載！ さっそく
黄金比ってWebではどうなの？～三分割法と黄金比の話～｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは。毎日暑いですね…。猛暑日が続き、いよいよ夏バテがやってきそうです。夏はイベントも多く外に出たくなりやすいですが、外出の際はこまめに水分補給をしましょう！私はビール補給を毎日したいです。 さて、今日は美術やデザインを学ぶ中で一度は聞いたことはある『三分の一の法則(三分割法)』と『黄金比』について書こうと思います。皆さんはこの法則を意識してデザインをしたことがありますか？ 三分の一の法則とは？ まずは三分の一の法則について。 イラストや写真、文字などの要素を１つのエリアにレイアウトするとき、画面の中を分割するようなイメージでそれぞれの範囲に役割を与えると、受け手に情報が伝わりやすくなります。例えば、「写真のエリア」「タイトルのエリア」「説明のエリア」といったイメージです。このように3つの要素を配置する際に、三分の一を意識してあげると、全体的にまとまった印象になります。 上図のように
フロップデザインフォント
フロップデザインフォントという商用可の日本語フリーフォント フロップデザインフォントは、どなたでも自由に無料でダウンロードして、商用・非商用問わず使用できる日本語フリーフォントです。このフォントは第二水準の漢字も含まれ、ワープロ、Adobe製グラフィックソフトなどのアプリケーションで自由に加工して使えます。ひらがな、カタカナ、アルファベット、数字をオリジナルで制作し、残りの部分をM+FONTで補いました。またM+FONTで不足している漢字をIPAゴシックで補完しています。 フォントのデザイン特徴について 水平、垂直の線がデザインの基本となっているシンプルなゴシック体の日本語フォントです。暖かみのある手書きを感じさせるひらがな、シャープなイメージのカタカナ、スマートでデザイン性の高いアルファベット（英語）、スタンダードで読みやすい数字とそれぞれ異なる考えに基づいて作られたフォントです。しかし
簡単に使えて、コンバージョン率が高まるUI Tipsまとめ | Goodpatch Blog
しっかりと考えられたUIのアプリやWebサイトはとても使いやすいく、使っていてとても楽しいですよね。この記事を見ているデザイナーやディレクターの方の中でショッピングサイトや登録型サービスを担当し、UI設計をしている方もいるのではないでしょうか。UI設計をする上で必ず考えるのが「ユーザーが使いやすいUI」だと思います。しかし前述したショッピングサイトや登録型サービスの場合は使いやすさと共に、「ショッピング購入数」や「登録者数」にも気を配る必要があります。そこで今回は「ショッピング購入数」や「登録者数」を示す、”コンバージョン率” を高めるUIとはどんなものか、海外の記事を参考に考えてみたいと思います。 （この記事はGoodUIから翻訳抜粋したものです） GoodUIには簡単に使えて、コンバージョン率を高めるUIのアイデアがいくつかまとめられています。その中から6つ、素晴らしいアイデアをピック
CSS3のFlexboxでパーセントで指定された要素を天地左右の中央に配置する
CSS3のFlexboxでパーセントで指定された要素を天地左右の中央に配置する ネタ元：[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック | コリス これを読んでちょっとトリッキーだな。CSS3のFlexboxを利用すれば簡単にできるのにとおもったので紹介しておきます。 次のようなHTMLがあったとして、 <div id="outer"> <div id="inner"></div> </div> 次のようにCSSを指定すると天地左右中央配置が可能です。 #outer{ height:100%; display:-webkit-box; -webkit-box-pack : center; -webkit-box-align : center; } #inner{ width:50%; height:40%; background
Tumblrってここまでカスタマイズできるの！？Tumblrで作った驚きのWebサイト
海外では「WordPressの次はTumblrだ... / 海外のTumblrサイト / Capitol Couture他...全14件 海外では「WordPressの次はTumblrだ！」と言われるほど、CMSとして使い勝手が向上しているTumblr。確かに最近では、Tumblrで作ったとは思えないようなサイトを国内外で頻繁に目にするようになりました。 ここまでカスタマイズできるのなら、Tumblrは本当に次のWordPressとなりうるかもしれません。そんな常識を覆すような驚きのWebサイトをご紹介します。 参考：Will tumblr become the next wordpress? | Deepu Balan http://deepubalan.com/blog/2013/07/03/is-tumblr-an-upcoming-powerful-cms/
あなたの知らない超絶便利なWeb開発を叶える仕様Web Componentsとは
Web Componentsとは 本稿では、Google I/O 2013の中から、「Web Components」に関するセッションをレポートする。 「Web Components」は、簡単にいうと、Web（HTML）をコンポーネント化するための仕組みで、再利用性やメンテナンス性、開発効率を上げるのに大きな効果があるといわれている。 今年のGoogle I/Oでは、次の2つのセッションでWeb Componentsについて解説があった。 Web Components: A Tectonic Shift for Web Development（Google Chromeチーム 開発者Eric Bidelman氏） 資料：http://www.WebComponentsshift.com/ 「Web Components: A Tectonic Shift for Web Developme
JavaScript でオセロを実装する(遅延評価編) | Webシステム開発／教育ソリューションのタイムインターメディア
これまでのあらすじ 新人の力量を測るための課題としてオセロの作成を指示したが、 指示した当人が作れないようでは話にならないので実際に作り始めた。 一先ず盤面が4×4で黒も白も人間が指す一人二役の寂しいオセロは実装できたのだが、 快適に遊ぶには大きな問題が潜んでいたのであった。 実は4×4で既に重い問題 実際に前回作成したオセロを実行すると、 ゲームが遊べるようになるまでに割りと待たされます。 それもそのはずで、あの実装は ゲーム中で取り得る局面を予め全て列挙 していたからです。 しかも4×4という最小限の盤面のオセロですらゲーム中に出現し得る局面 = ゲーム木に含まれるノード数は 284,881個 あります(※回転すると同じになる盤面等は個別に数えて、同一盤面でも手番のプレイヤーが異なるなら別と数えて、パスした場合も1個と数えています)。 そりゃあ待たされるに決まってますし、無闇矢鱈にメモ
JavaScriptで`undefined`の代わりに、`void 0`を使ったほうがいい理由 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今まで平気でundefinedを使ってましたが、underscore.jsのソース読んで、無防備にundefinedを使っちゃいけないなってことを初めて知りました。いやはや、まったくもって面目ない！ 知っている方なら知っていると思いますが、意外と知らない方も多いのでは？という意味でのプチ記事です。 void 演算子 voidは１つの式を取って、常にundefinedを返す演算子です。 例えば void 0 void (0) void 99 void "wow" void {} //すべてundefinedが帰ってくる と、このように、voidはundefinedの代わりとして使えるのが分かりますよね。 上記の理屈で行くと、そんな面倒なことをするまでもなく、undefinedを直接使えば済む話じゃあ？と思いますよね。ところが話はそう簡単ではないようです。 何故なら、なんと、undefined
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
【ウェブユーザビリティ洞察】自動送りカルーセルとアコーディオンは、ユーザーをいらつかせ、可視性を下げる……ニールセン博士のAlertbox （RBB TODAY） - Yahoo!ニュース
【ウェブユーザビリティ洞察】自動送りカルーセルとアコーディオンは、ユーザーをいらつかせ、可視性を下げる……ニールセン博士のAlertbox RBB TODAY 7月7日(日)10時0分配信 先日、イギリスでユーザビリティ調査を実施したのだが、そこで、あるユーザーが「Siemensは洗濯機のキャンペーンをしているか」というタスクを行おうとしていた。 他の写真を見る そのユーザーはさして苦労もせず、イギリスのSiemens Appliancesのこのホームページにはたどり着いた。 どうだろう、そのユーザーは先ほどの課題に答えを出すことができただろうか。ホームページ上での最も大きなアイテムが、画面スペースという意味でもフォントサイズという意味でも、洗濯機の大きな写真の隣にある「指定のSiemens製品」の100ポンドの割引であることから、答えを見つけられたのではないか、とあなたは思うだろう。
Web2.0がうまくいかなかったワケ
TBSの深夜番組で、人狼のカスタマイズ版であるジンロリアンという番組をやっていた。 普通の人狼とはルールが違う部分があって、 ・人狼と疑わしきプレーヤーを排除するのを決定するのは視聴者のオンライン投票（生放送） ・人間の側にナイトや占い師などの役職がない。 というもので、一瞬面白いと思って見ていたが、場を盛り上げる芸人が率先して排除されていく様に、すぐにルールが成り立ってないことに気がつく。 ・役職がないので圧倒的に人間が不利。情報が非対称。 ・当事者ではない視聴者が投票するので、目立ったもん負け ・人間の側が条件をひっくり返すほどの武器を持ってない。 ・ということなので、深夜にプレーヤーが殺される意味が無い。（普通の人狼は、占い師と騎士をいち早く殺したいハズなのだが、こっちは全員人間なので誰が死んでもあんまり関係ない。最後に壇蜜が竹山を殺した理由を誤魔化していたように見えた。「なんとなく
国産のRSSリーダー『Feedeen』に乗り換えたら超幸せになれた（追記あり）
『Googleリーダー』の終了で『Feedly』に乗り換えるも『はてブ新着』の取りこぼしが判明して困り果てていたボクですが、国産のRSSリーダー『Feedeen』に乗り換えたら超幸せになれました。 Feedeenは、デジマガで以前“Googleリーダーの代替サービスを試してみたけれどダメだった話”という記事を書いたときに開発者の方が連絡をくれたRSSリーダーで、元Googleリーダーユーザーの方がひとりで開発されているそうです。 オレオレGoogleリーダーを作ったので、ベータテスターを募集します – WebOS Goodies で、肝心のはてブ新着RSSの取得率ですが……ほぼ取りこぼしはありません。もしかしたらあるのかもしれませんが分からないレベルです。ご覧のとおり分単位で細かく取得してくれます。 画像では既読・未読が入り交じってますが、これは未取得の記事を取得したときに時系列順に並び替
RSS配信を中止したGoogleアラートの代替として使える『Talkwalker Alerts』
RSS配信を中止したGoogleアラートの代替として使える『Talkwalker Alerts』 『Talkwalker Alerts』は指定キーワードの検索結果をメールやRSSで受信できるサービス。 先日のGoogleリーダーの終了に伴うかのようにヒッソリと廃止されたGoogleアラートのRSS配信ですが、こちらはその代替サービスとして注目されているサイトです。 まず最初にアカウントの作成を兼ねて、目的のキーワードを指定し適宜オプション選択をします。 （オプションはGoogleアラートのそれをほぼ同様です） プレビューしてOKならメールアドレスを入力して「CREATE Alert」をクリック。 しばらくすると確認メールが届くのでそこに記載されているパスワードを控え、アカウント確認のためのリンクを開きます。 作成したアラートは管理画面で一括管理することができま、デフォルトでは検索結果が登録
流行るかどうかは別としてロングシャドウデザインを考察してみたら意外と深かった – オレインブログ
フラットデザインが世間を賑わしてまだそれほど時は流れていませんが、海外ではフラットデザイン2.0という呼ばれ方もされることがあるようなロングシャドウデザインというものがどんなものなのか考察してみました。 そして、ロングシャドーデザインを作る方法を勝手ながら考えてみました。 ドロップシャドーデザインとは？ ロングシャドウデザインとは、言葉で説明するとこんなかんじになるのでしょうか。photoshopvipさんの言葉を引用すると、 斜め45度に差し込む光が作る、その名の通り、シャドウ部分を強調した、冬の日によく見受けられる様な、長い影が印象的なデザイン とこのような感じになりますかね。的確な表現かと思います。 ざっくりとどんなものかを検証してみました ハイライトの角度、シャドウの角度、ともに45°できれいに作ってあります。そして、配色ですが分かりやすいようにHSB方式で表記してあります。 ハイ
これはウェブページです｡
たいしたページではありません｡ あるのは言葉だけ｡ それをあなたは読んでいます｡ オシャレなデザインや､レスポンシブなレイアウト､魔法のようなスクリプトに私たちは魅了されてしまいました｡ でも､ウェブで一番強力な道具は､今も昔も言葉です｡ 私が書いた言葉を､あなたが読んでいる｡これこそ魔法です｡ 私はブリティッシュコロンビア州の小さな都市にいますが､あなたは別のどこかにいることでしょう｡私は2013年6月20日の早朝にこれを書きましたが､あなたは違う日時にこれを読んでいることでしょう｡私はノートパソコンでこれを書きましたが､あなたは携帯電話でこれを読んでいるかもしれないし､タブレット端末やデスクトップ端末で読んでいるかもしれません｡ 私とあなたがこうして繋がることができたのは､私が書いた言葉をあなたが読んでいるからです｡ウェブとはそういうものです｡場所や端末､タイムゾーンが違っても､このシ
Superconductor: Big Data Visualization for the Web
Superconductor is a web framework for creating data visualizations that scale to real-time interactions with up to 1,000,000 data points. It compiles to WebCL, WebGL, and web workers to unleash the power of parallel hardware for fast and cross-platform data visualization. Learn more » Caution Superconductor is currently available as a developer preview. We want to give you an early look at what we
【2013年上半期】教育のあり方を劇的に変える注目の教育系サービス7選：GREAT GEEKS：オルタナティブ・ブログ
日本でも少しずつ認知されてきているITによる教育サービスの提供ですが、ここ半年でまた新たに面白いサービスが出てきているのでまとめてご紹介したいと思います。2013年上半期までで佐々木が面白い・ポテンシャルが高いと独断で選ばせて頂いたサービスになります。今回は”日本発”という切り口から、日本の教育を活性化してくれそうなサービスをまとめました。 ◆日本発の教育系サービス7選 1.中学生、高校生のためのITキャンプ『Life is Tech』 中学生、高校生がプログラミングやデザインを学べるIT教育サービスです。子供向けプログラミングという切り口で言えば、国内で最も注目されているベンチャー企業と言っても過言ではないでしょう。いつも私もイベントの内容など興味深く拝見してます。プログラミング学習もどんどん若い頃から学べる環境にする動きが活発になってきているので、もしかしたら１０年後は小学生はみんなP
[JS]手書き風のシーケンス図をウェブページに簡単に設置できるスクリプト -JS Sequence Diagrams | コリス
Demo 3 JS Sequence Diagramsの使い方 Step 1: 外部ファイル JS Sequence Diagramsの実装には、「Underscore.js」と「Raphaël」が必要です。 <script src="raphael-min.js"></script> <script src="underscore-min.js"></script> <script src="sequence-diagram-min.js"></script> Step 2: HTML シーケンス図を描画するエリアを確保します。 <div id="diagram"></div> Step 3: JavaScript スクリプトでテキストを書き、実行します。 <script> var diagram = Diagram.parse("A->B: Message"); diagram.dra
指定したカラーを元に展開したカラーを一覧表示するカラースキーム設計に役立つPhotoshopの機能拡張 -ColdWarm
メインの碁盤状が暖色と寒色にしたもの、右のバーが彩度 ColdWarmのインストール ColdWarmの使い方 ColdWarmのインストール ColdWarmはPhotoshop CS5, 6用の機能拡張で、下記ページからファイルをダウンロードします。 ColdWarm 「Free Download」から、CS5, CS6を選択してクリックしてください。 ダウンロードした「ColdWarm_CS6_1_3_2.zxp」をダブルクリックすると、Adobe Extension Managerが自動で開くので、説明を読み、インストールします。 インストールが完了したら、Photoshopを再起動し、ツールバーの[ウインドウ]-[エクステンション]から「ColdWarm」を選択すると起動します。 PhotoshopでColdWarmを起動 ColdWarmの使い方 使い方は簡単でカラーを選択する
リアルタイムに文字数、段落、単語数を計算して表示できる「Countable.js」:phpspot開発日誌
Countable.js ? Live word-counting in JavaScript リアルタイムに文字数、段落、単語数を計算して表示できる「Countable.js」。 テキストエリアに入力するとリアルタイムに文章の情報が出ます。文章作成時等に便利かもしれません。 単語は英語にのみ対応しているのであまり使えませんが、段落や文字数はなかなか使えそうです jQuery等は不要で、スクリプト単体で動き、1KB程度と軽量なのが特徴 関連エントリ LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」 グラデーション生成ウィジェット実装jQueryプラグイン「GRADX」 アニメーションスクロールをデフォルト化できるjQueryプラグイン「Scroll To」 サイトの使い方をその場で表示できるjQueryプラグイン「TourBus」 範囲指定が可能になるUI実装j
イメージを拡大表示してくれるプラグイン集「25+ jQuery Image Zoom Effect Plugins」
WEBに掲載している写真をより大きく見せたいということは、商品などを扱うWEBでは特に多いことだと思います。今日紹介するのはイメージを拡大表示してくれるプラグインを集めたエントリー「25+ jQuery Image Zoom Effect Plugins」です。 Featured Image Zoomer 全部で25ものjQueryで簡単に実装できるズーム系のプラグインが掲載されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Image Power Zoomer 一部分だけを小窓をでズームしてくれるタイプのプラグイン jQuery Zoom クリックとドラッグ両タイプをキーにしてズームができるプラグイン MORE INFO / DEMO 選択した画像を拡大表示するプラグイン。座標も同時にとれるため様々な使い方ができそう。 上記の他にも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://shingekidesign.com/?p=187
レスポンシブやらアイコンフォントやらフラットやら！2013年の気になる技術やデザインを試してみたリニューアル手順！ | バンクーバーのうぇぶ屋
場面に合わせて使いわけよう！デザイナーなら知っておきたい、美しい和文フォント10選 - Moxbit
読ませる文字組みと注目してもらう文字組み8/8
独創的な「ズーム」ができる折り畳み式の地図「map²」
制作案件に使えば注目度アップ！CSS3を使った驚きのアニメーション表現
Site is undergoing maintenance
Twitterが、あなたの「店頭」に：Squareがオンラインストア開設
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
TechCrunch | Startup and Technology News
フォントのサイズと行間と一行の文字数の最適な関係を導き出すオンラインツール -Golden Ratio Typography Calculator
IDEA * IDEA