今の制作会社に勤めて5年になりました。Web系の専門学校からアルバイトとして入りそのまま正社員となり、右も左もわからないまま、なんとかWebデザイナーとして突っ走ってきました。 そんな思い出深いこの会社を今年の6月で退社することとなりまして、昔を振り返りながら、もっと早くからやっておけばよかったと思うことをいくつか。 もっと早くブログを始めてればよかった まずはこれです。既に書いている人、書き始めた人は必ずコレ言いますけどw ほんとにもっと早く始めていれば、と思います。「Webの知識が浅いのに、ブログ記事なんか書けない、書いたら恥ずかしい」なんて考えていたんでしょうか、あの時の僕は。 ブログを書くということのメリットをあげると、 ・Webに対する意識が深まる ・いろんな人と繋がる ・他の人のブログをしっかり見るようになる(これが結構デカい) ・過去の自分と今の自分を比較できる判
このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 Webは見た目のコントロールがきかない モニターの外をデザインするのが大半である Webは寛容性をデザインする場である Webのデザインは枠のない世界である Web や書籍を見ていると、様々な「素晴らしい Web サイト特集」があり、一体何を基準に評価しているのか分からなくなることがあります。人間中心設計をしようという声が高まっていると同時に、グラフィカルで一方的なコミュニケーションのサイトも評価が高いですし、Web という媒体への理解や解釈が様々なので、評価がバラつく場合もあります。 もちろん、Web の捉え方は人それぞれで良いと思います。しかし、それにより「Webデザインしたい！」と考えている人たちが、何をもって良い
RefineSlide / Camera | a free jQuery s... / CarouFredSel他...全7件
画像内の任意の箇所に自由にホバーで テキストを表示するツールチップを 配置出来るjQueryプラグイン・iPicture のご紹介。この手のライブラリは、 実務でかなり有効的に使えますので 覚えて置いて損は無いのでは。 画像上にツールチップを配置出来るライブラリです。ECサイトや不動産、ホテル、アミューズメント施設などなど用途は沢山ありそうです。 こういうやつ。画像の上にオブジェクトを配置してマウスホバーで情報が見られる。 ECサイトなんかでは、こうやって生活してる写真にしてあげることでユーザーはプロダクトを使用してるイメージをしやすくなりますので、訴求力アップに貢献できます。 コード<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></s
「素人っぽいデザイン」から抜け出すために、デザイ... / デザインを勉強したことがない人でもデザインできる... / 非デザイナーのためのデザイン基本テクニック その...他...全10件
#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる このリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord
natrixnatrix89/promptumenu @ GitHub スマホのホーム画面っぽいものを作れるjQueryプラグイン「Promptumenu」 iPhoneのホーム画面でフリックによってメニューがスライドできるというようなものをブラウザ上で実現できます。 当然、PCだけでなく、スマホでもフリック可能で、動きがなめらかなのもいいです。スマホのメニューを作るなら使えそうです フリック可能 実装も超簡単です。ulにメニューを並べて初期化するだけ 自分で作ると大変そうなところをやってくれるのはありがたいですね。 関連エントリ デザインがクールなタグクラウドを実装できるjQueryプラグイン「jQCloud」 スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」 時間の入力を楽にすることが出来るjQueryプラグイン アニメーションする
ちょっと面白いプラグインだったので 備忘録。曲線に沿ってテキストを折り 返せるようにするjQueryプラグインで す。新聞のようなレイアウトも組めそ うです。用途はあまり無さそうですけ ど、珍しいので覚えておきたい。 Bacon!(ベーコン)です。名前の経緯は分かりませんが、ペジェ曲線にそったテキストの折り返しが可能です。 こんな感じ。結構前に同じようなライブラリありましたね。こちらはペジェ曲線と同じような感覚でラインを作る事が出来ます。 こういうのとか こういうのも作れる。 IEでもなんとか動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="bacon.jquery.js"></script>jQueryとプラグインを読み込む
iPhoneやAndroidなどのスマートフォン、「新しいiPad」などのタブレット、そしてデスクトップなど、さまざまなデバイスの幅に対応させるResponsive Web Designのために、どのようにレイアウトの幅を設計し、いくつレイアウトを用意するのか3つの方法を紹介します。 各デバイスの幅は、2012年3月のデータです。 A Simple Device Diagram for Responsive Design Planning [ad#ad-2] 下記は各ポイントを意訳したものです。 キャプチャに使用している画像は元記事よりPSDファイルでダウンロードできます。 各デバイスのサイズ レイアウトを3つ レイアウトを4つ レイアウトを6つ 各デバイスのサイズ まずは、2012年3月現在の各デバイスの幅です。 ※クリックで拡大 ポイント 上段：ポートレイト（縦置き）、下段：ランドスケ
ナビゲーションが固定配置されたWEBサイトのまとめです。このブログもナビゲーションを固定配置しているので個人的にも非常に気になるところですね。 b14 Happy Cog Character Face. Works. OK Studios Latorre 各コンテンツの情報量が少なかったり、コンテンツ数が少ないサイトには向いていますかね。遷移の仕方を工夫すればユーザビリティを確保しながらおもしろい演出をすることも可能です。 ただし高さのないワイドモニタなどではナビや情報が見切れてしまう可能性もあるので、様々な環境を考慮してデザインすることが重要ですね。 21 Examples of Fixed Position Menus in Web Design
しつもーん。『北米でWEB制作者になりたいです！専門学校に通うお金とか無いんですが、何か良さ気なサイトとかあったら教えてください！』 「なめんなよこの野郎。そんな都合の良いサイトあるわけ…ｺﾞｺﾞｺﾞｺﾞｺﾞ」とかっこよく拒絶するのは簡単なんですが、思えば今や通信学習やらオンラインコースやらと結構色々あるんですね。それどころか、「あぁ、もし僕が今からWEB制作学びますって時に、このサイト見てたらなぁ」なんて思うサイトや記事も正直多いわけです。 もちろん、WEB制作と一概に言っても多岐に渡るのは皆さんご存知の通りかなと。僕も含め、周りのWEB制作者な皆さんの多くは専門学校やら大学やらでWEB制作を学んだ方が多いので、オンラインのソースや教材だけでWEB制作を学ぶとどうなるか、僕にはわかりませんが、多少なりとも羨ましい世の中だと思う部分もあるわけで、今日はそんな今からWEB制作を学ぼうとする人
やはりサイトの存在目的は必ずあります。デザインやシステム的な部分も重要ですが、 その前にもう一度目的を考えなければなと・・・ そう思ったので書いてみました。 色々と皆さん、それぞれに考え方があると思いますが、個人的に注意したいポイントを以下の分野別に書いていきます。 大体サイトとしては ブログ 一般企業 Webサービス IT・プロダクト・ゲーム オンラインショップ 教育・学校 病院・老人ホーム 飲食 デザイン・ファッション・音楽 金融・証券・保険 美容・健康 アダルト とか、その他色々ありますがこのような感じでしょうか？ ※ちょっとカテゴライズが不思議な感じですが、説明しやすくしたい為です。すいません。 これらのサイトはもちろんケースバイケースで設計や装飾などが変わってきますが、 共通する注意点があると思います。 それぞれ、コンバージョンは必要ですよね。 ゴールを必ず決
IKEA | TRY ON A NEW SOFA... / uniqlo undercover / TIERRA | 福岡市中央区平尾の美容室 ティ...他...全5件
日本デザインセンター / Andreas Pihlström / TYP他...全14件
2012年2月25日 CSS Nite in TAKAMATSU vol.6 が開催されました。CSS Nite は、ツールの使い方や制作のノウハウなど、テクニックを扱うことが多いイベントですが、今回は全編を通してコードが出ないという珍しい構成でした。いつもとは少し違う雰囲気ではありましたが、他の CSS Nite にはない満足感を得た方も多かったのではないかという印象を受けました。イベントの様子はTogetterでまとまっているので参照してください。 私のセッションは、Webデザインのウソ・ホント ～ Web らしくデザインするためのヒントと題して、未来を見据えた Web のデザインを行う上で必要な考え方や取り組み方法を紹介しました。 今月はセミナーで登壇する機会が3回もあり、過密なスケジュールでした。準備は大変でしたが、3回を通して一貫としたテーマがあったかと思います。なんとなく「未来
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
