新人WEBディレクターに教えたい。オリエンテーションとヒアリング
以前WEBディレクターの仕事について簡単に記事にしましたが、今回からもう少し詳しく、1つ1つの仕事について紹介させていただこうと思います。 WEBディレクターの仕事というのは非常に多岐にわたっていて、一言でこんな仕事をしているよ！とは言えません。Webディレクターはプロジェクトの受注からサイト企画・進行管理・運用などさまざまな業務に関わり、案件を滞りなく進めていくことが主な役割です。そのため基本的にサイト制作のすべてにWEBディレクターは顔を出します。だからこそ一言でWEBディレクターの仕事を表すのは難しいんですね。 オリエンテーション・ヒアリング クライアントからお問い合わせを受け、受注に至るまでには大きく分けて5つのフローが存在します。その中から今回はWEBディレクターの最初の仕事であるオリエンテーションとヒアリングのポイントを紹介させていただきます。オリエンテーションやヒアリングはW
各ブラウザがul/ol要素に適用するスタイルに関するメモ
CSSを書くとき、いつもul, ol要素のデフォルトスタイルのことを忘れてて悩むので、デフォルトだとどういう感じで表示されるかメモしておきます。 確認したブラウザは以下。 Internet Explorer 6, 7, 8Opera 9.6Firefox 3.0Google Chrome 2.0SafariはChromeと同じ表示になるので省略。 ul要素にmarginとpaddingを指定したりして試しました。 他には何も指定しなくてもよかったんだけど、やってみたら分かりづらかったので ul要素に1pxのボーダー、それを囲むdiv要素に背景色とpadding:5pxを指定。 margin，paddingどちらも指定なしの場合の場合margin-left:0を指定し、paddingは指定なしの場合margin指定なし、padding-left:0を指定した場合margin-left:0とp
[JS]ページのレイアウトに役立つjQueryのプラグインのまとめ
Pinterestのようにパネルを隙間なくレンガ状に配置したり、異なる高さのパネルを同じ高さにしたりなど、ページのレイアウトに役立つjQueryのプラグインを紹介します。
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
はじめは今までと同じように、カンプを作ってからコーディング、というやり方でした。 しかし、そのやり方だとトラブルが多いんです、なぜか。 ブレイクポイントとかで揉めたりすることが多いです。 早い話が、いままでの制作のやり方は、レスポンシブWebデザインでは無理だということです。 allWebクリエイター塾の菊池 聡さんは、「レスポンシブWebデザインでは、いままでの仕事のやり方は通用しない。いずれはブラウザでデザインする時代がくる」と、某セミナーで言っていました。 実際、最近は、ブラウザでデザインする、いわゆる「インブラウザ・デザイン」で制作することが多くなってきています。最近は、ほぼ7割くらいです。 最近、久しぶりにFireworksでカンプを作りましたが、「以外とPhotoshopやFireworksでカンプを作るのが面倒だな」と感じました（ちょっといらついていたような気がするのは気のせ
Dating App Designed to Be Deleted? | 2expertsdesign.com
About Contact Is A Dating App Designed to be Deleted the Answer to Modern Online Dating?Hinge, an app created for online dating which is designed to be deleted after meaningful connections are made, offers a fresh concept of digital courting. This distinct approach was engineered with the idea that once users build special bonds via this platform, they no longer need it in their lives and can dele
Responsive Web Design: 50 Examples and Best Practices - Designmodo
What is Responsive Web Design? So, what is a responsive website? What does it look and feel like? According to Wikipedia, responsive web design is an approach that ensures all the pages of the website look, work and feel perfectly on any device. Whether it is a tiny old cell phone with a screen width of 320px, a modern phablet with 7 inches screen, a big iPad, or a TV with a massive diagonal line,
HTML5ホームページテンプレート無料配布 [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
login design, freebies and inspiration - WebDesignShock
So, how important is a login screen for your next application or website? It’s the way you start the communication with your user, it’s the “hello world” section of your application, And believe us or not, it has to rules ! we have made a full research of the best (and fresh, like everything here in webdesignshock) login screens on the internet and prepare this huge list of both freebies and inspi
60のレスポンシブデザインまとめ
The digital age is here to stay, and we must adapt in order to compete. The growth of smart-phones, tablets (let’s be honest, iPad), and netbooks is increasing every year (by the way if you’re in need of up-to-date and trending products check out DotBeasts. They’re trusted by thousands of people). While moving into the so called “post-PC era,” the job of a modern web designer is getting a tad more
レスポンシブWEBデザインのサンプル26
li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> Home Categories Tutorials Resources Inspiration Freelance Interviews Design Freebies About Contact Advertise With Us Write For Us Contact
Showcase of Websites Using Hexagons - Designbeep
We always love to follow web design trends and showcase beautiful websites for your inspiration.You know in 2011 and this year 2012,geometrical shapes like circles,triangles are widely used in web design.What about hexagons?We have noticed more websites using hexagon shape and here are some example of websites using hexagons. You may also take a look at our past collections for inspiration; 25 New
23 Inspiring Single Page Designs
21 Comments Never has the phrase “less is more” been more true. Very inspiring, found another one the other day, also very slick one-page design: https://www.liloemusic.nl Nice collection.. Fleava is my preferite. I just had way too much fun on the thinkgreenmeeting.com website. Too cool!!! These are great “Lets go rally” is my Favourite. But maybe next time you could add https://iamcreative.me Gr
SwapSkills「レスポンシブWebデザインはトレンドではない！」 | アイビーネットblog
Webのデバイスはドンドン増えてきている。そのため、すべてを判定し、対応しようとする複雑なアプローチはだんだんと厳しくなってきている。 レスポンシブWebデザインが注目を浴びている理由、それは単純だから。アプローチとして複雑ではないから。 SwapSkills in Nagoya「レスポンシブWebデザインはトレンドではない！」に参加してきました。 レスポンシブWebデザインのことは知ってはいたのですが、イマイチ理解が出来ていない＆そろそろ理解しないとまずいという思いからの受講です。 注目を浴びている理由 レスポンシブWebデザインとは、モバイルのスクリーンサイズから始まって、大きいサイズのスクリーンまで、デザインを変えた物をアプローチとして提供していく手法のこと。 レスポンシブWebデザインの考え方自体は10年前からあったが、技術的な問題からなかなか実現には至らなかった。生まれたのは2
簡単なA/Bテストでランディングページの売上を倍増させる6つの方法
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. ランディングページのコンバージョンを最大化するためには、継続的なA/Bテストが不可欠だ。 A/Bテストは地道な作業だが、根気づよく実践すると、自分自身、驚くぐらいに数字が改善されていく。 しかし、実際にA/Bテストをするとなると、どこから手をつければ良いのか分からなくなってしまう方も多いのではないだろうか？ そこで、本日は、A/Bテストによって、ランディングページのコンバージョンを倍増させるための方法を、６つの事例とともにご紹介する。ぜひ、参考にして欲しい。 事例１．キャッチコピーを変更後コンバージョンが1.44倍にランディングページにとって、キャッチコピーは何よりも重要性だ。そのため、キャッチコピーの作成だけで執筆時間の８割を使うコピー
ポータルサイトのデザインをする時に意識したこと5つ - Design Color
もくじ グローバルメニューを埋れさせない 色を使いすぎない 余白を空けすぎない 囲み線を多用・強調しすぎない サムネイルに黄金比や白銀比を使ってみる 1.グローバルメニューを埋れさせない ポータルサイトは情報量がとても多いです。ユーザーを迷わせないためには、画面が遷移しても変わらずそこにいてくれる「グローバルナビゲーション」は頼りになる存在です。それが他の情報に埋れてしまってはもったいないですよね。なので、デザイン時にはまずこの子に注目してみました。 白抜きのメリット 色々なサイトを観察していると、ナビゲーションバーに白抜きを使っているサイトが多く見られました。 調べてみたところ、白抜きは小さな文字でもやや大きく見えるというメリットがあるとか。なぜなら、白は「膨張色」だからです。 膨張色とは明度が高いことから、他の色に比べて膨らんだり広がったり錯覚する色のことです。白や明度の高い暖色系が膨
Why You Should Choose WordPress
You may be asking yourself why use WordPress? In order to be the most effective in their work, it is very important for professional web designers and developers to learn and utilize the right tools. Today, I wanted to clear once and for all why using WordPress is the best choice for most freelancers. I will also cover how to make your workflow super productive by using theme framework. As a profe
私がWebサイトの配色を決める時の流れ
ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。 「○○のような高級感」と具体的に伝えてもらうと良いです。 2.調査 競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。 ただし同業の全てのサイトと被らないようにするのは無理があるので、 商圏内で競合となる他社のみを比較対象とします。 また、既にクライアントが名刺やパンフレット、フライヤー、ノベルティやなどを制作していたら見せてもらったり、 店舗であれば外観・内装の
デザインのインスピレーションが得られる最強Webサービス7選
毎日のようにデザインをしていると、良いデザインが思いつかなかったり、前回と同じようなデザインが完成してしまったりと、どうしてもデザインに行き詰ってしまうことがありますよね。 私自身まだまだ未熟なこともあり、デザインに行き詰ることはよくあります。そんなとき、私は極力仕事中でもカメラ片手にボーっと散歩に出たりして、どうにかインスピレーションを刺激させようとするんですが、散歩に出られないときや、散歩に出ても何も思い浮かばなかったときなどは、いくつかのWEBサイトを見てインスピレーションを刺激させます。 ｢インスピレーションの刺激になるぞ｣と思ってブックマークしたサイトはいくつもあるんですが、今回はその中から、とくに皆さんに紹介したい利用頻度の高い7つwebのサービスを紹介したいと思います。ではどうぞ！ 1.Dribbble Dribbble これはかなり有名なサイトですね。いまさら紹介するまでも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.splashnology.com/article/responsive-web-design-toolbox-50-handy-tools-and-services/2632/
11 Free Online Books for Web Designers
