ドットインストール代表のライフハックブログ
どうしたらクライアントの納得するデザインにたどり着けるのだろう。と考えたことはありませんか?デザインのフィードバック地獄で苦労したWebデザイナー、ディレクターの方は多いと思いますが、振り回されがちなWebデザイナーの特徴とその対処法について、ケーススタディでまとめてみました。 ■クライアントに振り回されるWebデザイナー/WEBディレクターの特徴 「フィードバック指示を額面通りに受け取ってしまう」 これに尽きます。クライアントはデザインをした事が無い人がほとんどなので、修正指示もデザイン的には正しくない事がかなりの割合であります。 これは映画を観て良かった悪かったは誰にでも評価できるが、その映画をどのように修正したらよりよくなるかは経験を積んだ者にしかわからない、というのと同じことです。 にもかかわらず、「ここのボタンを赤くしてください」、「背景をグレーにしてください」という指示を額面通
All About Picking Colors Digital color can be represented in a number of ways. The most common ways to represent color on the web are via a 6-digit HEX number, RGBA, and HSL (Support for HSL was added in CSS3). Hex is a 6-digit, 24 bit, hexidecimal number that represents Red, Green, and Blue. An example of a Hex color representation is #123456, 12 is Red, 34 is Green, and 56 is Blue. There are 16
【フレッシュなWebデザイナーの皆さんへ】数ある... / ━━国内ギャラリーサイト━━イケサイ、ABM、S... / 【イケサイ】国内のコーポレートサイトが中心のデザ...他...全14件 【フレッシュなWebデザイナーの皆さんへ】 数あるWebデザインギャラリーサイトの中で、新卒Webデザイナーがとりあえず毎日見ておけば間違いない特にオススメのギャラリーサイトをまとめました。
※この記事では「Webデザイナー」は、「ノンプログラマ」の意味で使っています。 psd、ai などの材料データの管理ではなく、サーバーにアップするファイルの管理の話です。 サルでもわかるといわれても、やっぱりわからない・・・ Web制作をやっている人は、少なからずバージョン管理システムの話を聞いたことがあると思います。 特にGit(ギット)っていうのは、内容まで知らなくても名前くらいは聞いたことがありますよね。 で、ネット上ではバージョン管理システムのメリットに関するブログ記事なんかもたくさんあって、変更履歴をたどれるとか、複数人で同じファイルを修正したりといった時のトラブルに対応できるとか、なんか便利そうだなーとは思っていたわけですが、ずーっと導入は見送ってきました。 その理由は・・・ 「Git入門」とか書いてある記事を読んでも導入方法が書いてあるだけで、実際に使うシチュエーションが思い
高橋としゆき @gautt 以前に勉強会で「アピアランスを制す者はIllustratorを制す」的なことを話したけど、これ見てるとほんとそう思うわ。Illustrator Unlimited Appearance https://t.co/xWxEjPEgnu @jaypeg_officialさんから
Today, a website must not look good only on a desktop screen, but also on tablets and smartphones. A website is responsive if it is able to adapt to the screen of the client. Responsive web design is extremely important nowadays and is in fact one technique you need to master as a web developer or web designer. In this article, I’ll show you how to easily build a responsive site and how to apply r
March 26, 2013 The past year has seen many leaps made to improve developer productivity through better tooling. We're paying increasing attention to our workflow and many of us have spent time optimising our usage of tools like Grunt, Bower, Yeoman and the terminal. Another important area worth spending time on is your debugging workflow - if you're like me, this starts with the Chrome DevTools. W
生きてます。ナナメウエのはっちです。 お仕事で、mp4の動画からサムネイル(アニメーションGIF)を生成したいんだけどという場面に遭遇しました。 色々調べたところ、Webアプリでもあるっぽいのですが、そのアプリを試したところ正常に動いておらず、ぐぬぬ…どうしようかな、と。 そういえば?Photoshopで動画編集ができるという噂を以前聞いたことがあったので調べてみました。 意外とまだ需要のあるアニメーションGIF。 お役に立てれば幸いです。 Photoshopでmp4動画を開く 使用しているのはPhotoshopCS5です。 どのバージョンから動画が取り込めるのかは知りません。だってわたしFireworks派だもの…! ファイルから「開く」でもいけます。今回はドラッグ&ドロップで。 タイムラインを表示 読み込みに少々時間がかかりますが気になるような時間でもありません。 とりこま
Chrome Inspector State: Tweet By Adam Schwartz
Published: 22 March 2013 This article explores are simple method for creating responsive tables, without the need to radicially alter the table content or layout. There are a lot of very clever responsive table solutions available now. They include: flip the table on it's side, convert it to a pie chart, gradually reduce the columns, allow users to determine columns, and even allow partial scrolli
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55%で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」を紹介します。 jQuery hashchangeプラグイン 1.機能 Ajaxを使って切り替えたページについては、通常、ブラウザの「戻る」「進む」が使えません。 が、hashchangeプラグインを利用すれば、Ajaxを使って切り替えたページについてもブラウザの「戻る」「進む」が有効になります。 例えば下の図の①~⑤のページ遷移で、通常は「戻る」「進め」ボタンで②~④の遷移は行われませんが、hashchangeプラグインを使えば②~④のページ遷移も実現できます。 具体的な仕組みですが、まず基本的なJavaScriptの動作として、フラグメント(「index.html#abc」の「#abc」)を使ってページを切り替えた場合、フラグメント「#abc」が「location.hash」に
Google ChromeでCSSがSassの何行目に記述されているか確認する方法 Google Chromeでは表示しているサイトのCSSがSassの何行目に記述されているか簡単に確認することができます。 Sassで作られたサイトのCSSをGoogle Chromeで確認しようとするとインスペクタには以下のように表示されます。 このままだと、どのSassファイルの何行目に記述した内容が反映されているかわからないですね。 これを次のように変更します。Sassというか私は基本的にCompassを利用しているのconfig.rbを以下のように変更しコンパイルします。 sass_options = { :debug_info => true } output_style = :expanded #output_style = :compressed 次にGoogle Chromeのインスペクタの
Bolt - content management (1.0.2) - The Bolt website. レスポンシブでクールなCMS「Bolt」。 CMSは昔からありますが、レスポンシブでBootstrapベースのクールなCMSがオープンソースソフトウェアとして入手できます。 PHPとRDBによって書かれており、PHPな方にとってはカスタマイズなんかも簡単に出来そうです。設置やカスタマイズも簡単らしいです。 Bootstrapベースのクールなデザインとレスポンシブ対応が最初からなされているという所がポイントですね。 1つの選択肢の1つとして検証してみるのもよさそう 関連エントリ ZendFrameworkベースのCMS兼フレームワーク「Centurion」 ポートフォリオサイト構築専用のPHP&MySQLなCMS「The Secretary」 ZendFrameworkとExtJSを使
FlashCanvasはCanvasタグをFlashを使って描画するライブラリです。 HTML5の仕様に入っているCanvasですが、便利な機能である反面レガシなーブラウザに対応できないために利用を躊躇してしまっている人も多いのではないかと思います。そこで使ってみて欲しいのがFlashCanvasです。 Flotのグラフを表示した例。 多彩なグラフをFlash上に描画できます。 マウスに追従させることもできます。 ワープのような表示。 より複雑な描画を行うデモ。 FlashCanvasはCanvasタグをFlashを使って描画します。現在、Canvasタグのテストに対して72〜78%合格となっています。Google Chrome9.xが87.4%、Firefox3.6が74%なので簡易的な描画であれば十分耐えられるレベルと言えそうです。 FlashCanvasはFlash製、MIT Lic
Hook.js - Pull to refresh. For the web. ページを下に引っ張ると更新されるiPhone風UIを提供するjQueryプラグイン「Hook.js」 最近iPhoneを使っているとよくみるあのインタフェースをブラウザ上で実現。PCでも下にスクロールして上に移動すれば更新出来ます。 ページが更新されるだけなので、コールバック関数を設定できるように改造すればajaxによるページの更新なんかも可能ですね 関連エントリ HTML、CSS、JSでiPhoneアプリのプロトタイプが作れる「Ratchet」 iPhoneアプリ作成に使えるPSD素材集10 iPhoneの傾きで画像を回転させられるようにする「lenticular.js」 画像やスクリーンショットを実際に利用しているiPhoneやiPad画面にはめ込める「PlaceIt」 iPhone風のあのスクロールをPC
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く