Webデザイナーに愛を込めて。ディレクターが意識すべき７つのポイント | LPO研究所
LPO研究所所長の鎌田です。 先日、弊社デザイナーが「新人Webデザイナーにありがちな５つのコミュニケーショントラブルとその解消法」という記事を書きました。 この記事は公開2日で1万人以上もの方にお読みいただきまして、本当にありがたい限りなのですが、そのなかで 「指示を出すディレクターにも問題があるのでは？」 というご意見を同時に多数いただきました。 皆さんの仰るとおりでして、「売れるWebデザイン」というのは、デザイナーとディレクターの真剣勝負によってのみ生まれます。どちらか一方が依存している状態、考えていない状態では、ターゲットの心を掴むデザインを作ることはできません。 では、「売れるデザイン」をWebデザイナーに作ってもらうために、ディレクターは具体的にどう動けば良いのでしょうか？ 実はデザインディレクションにも、誰でもカンタンにマネできる「ちょっとしたコツ」があります。 今回は「デ
Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろ
2017年2月22日 CSS, 色彩 Sassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！Sassの基本的な情報は、過去記事「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」に書いています ;) ↑私が10年以上利用している会計ソフト！ 目次 透明度の書き方を簡略化 色の明度を調整する 色の彩度を調整する メインカラーの明度や彩度を調整して、リンク色を手軽に設定 背景のグラデーション 文字をグラデーションにする 縞模様の背景 抑えておきたい基本編 1. 透明度の書き方を簡略化 通常色の透明度を指定する時は rgba(0,
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita
リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外の要件が発生しないように気をつけるべきだろう。 この記事では、デザイナーやフロントエンドエンジニアが見落としがちなWebフロントエンドの課題について列挙していく。 ホバー表現を後から指示される ツッコミ 後から仕様追加されると困るから先に決めて! メモ 最近
Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選
みなさんはChromeの拡張機能を活用していますか？ 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ
それなりに使える、Web制作者がお世話になる便利ツール
作成：2016/01/4 更新：2018/05/01 Web制作 > 毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 エンジニア速報は Twitter の@commteで配信しています。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいですね。 検索の他、実用新案、意匠、商標の簡易検索ができます。意外と紹介している人が少ないのと、たまに使うことがあるのでメモしておきます。 J-PlatPat 特許事務所は検索で沢山出てきますので、ここでは割愛します。商標登録とロゴマーク作成を一括で頼めるサービ
HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
本気でweb制作を仕事にしたいなら 現場で通用する実践的なスキルを身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら 今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。 意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。 そのため、以下のような悩みを抱える人が多くいます。 ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。 ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。 ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。 適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの
Webデザインの勉強を始める人が幸せになれるツール＆サービス
2015年7月7日 便利ツール 先日超初心者さん向けにHTML・CSSを使ってWebページを作る講座を開いたのですが、予想通りやはり「これから勉強したい！」という人は、何から勉強すればいいのかがわからない事が多いです。また情報が多すぎて必要なツールもどれを選んだらいいかわからないケースもよく耳にします。そこで今回はその時教えたツールやサービスを中心に「これだけはそろえておこう！」というものを紹介します。あまりたくさん挙げても使い切れないかなーと思ったので、かなり絞っています。まずはこれらをとっかかりにし、自分好みのものを探していってくださいね！ ↑私が10年以上利用している会計ソフト！ 環境を整えよう まずはWebサイト制作をするための環境を整えましょう。 テキストエディター テキストエディターは、HTMLやCSSなどを使ってWebページを作成する際に使うツールです。Windowsに最初か
【Webデザイナー必読】PhotoshopやHTMLなどのスキルを劇的に上げられる記事まとめ30選
Webデザイナーとしてのキャリアを歩み始め1年目。基本的なスキルを学び、業務をひと通りこなせるようになったものの、先輩デザイナーと比べると、差を感じてしまうという方もいるのではないでしょうか？ Webデザイナーはクリエイター系の職種であるため、「センス」が重要視されるシーンが多いです。しかし、“学び”によってスキルアップできるのもまた事実。むしろ、テクノロジーの発展が著しい業界ということから、プロとして仕事を続けるのであれば学び続けなければならないのは宿命かもしれません。 そこで、今回は「Photoshopを使ったデザイン」や「HTMLなどの言語を使ったコーディング」、「Webデザイナーとしてインプットしておきたい情報」に関する30記事をご紹介します。 Photoshopなど、デザインに関する記事10選1.良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと こ
30代以降のwebデザイナーの転職の難しさについて語る
「事業会社でwebデザインできるデザイナーって少なくない？！30代なんてほんと少ない！！」 デザイナーの友人と飲み会にて、ふとそんな話になった。 私はwebデザイナーではないけど、採用にも関わってる中でデザイナー採用の難しさは感じてるし、勉強会とかであった他社の人からも同じような声をきく。 でも、転職したいといって転職活動をしている30代のwebデザイナーが多いということも肌感で感じている。この状況ってなんなんだろう？と思いぐるぐる文章をまとめてみた。 ※あくまで私の周囲の観測範囲内の話、という点ご了承ください。 30代以降のwebデザイナー転職によくみられる傾向 特に個人的な観測範囲でよくみるのは、30代中盤以降の女性のwebデザイナーの転職が難航しているパターンだ。 DTPからwebデザインに入りグラフィックデザイン歴が10年以上で、紙とweb両方のグラフィックデザインができることも多
webディレクターだけど、初心者に役立つサイト教える : ライフハックちゃんねる弐式
2015年02月07日 webディレクターだけど、初心者に役立つサイト教える Tweet 35コメント ｜2015年02月07日 10:45｜サイトまとめ｜Web・テクノロジー｜Editタグ ：web制作 1 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 17:41:24.70 ID:flJZIImcH.net 最近クソみたいなデザインとグッチャグチャのソースコード書いてる ミーハー丸出しアフィサイトが増えてきて鬱陶しいから、 これからサイト作る初心者用にサイトを紹介していく これ以上俺のウェブサーフィンライフを邪魔すんじゃねえぞ 当ブログサイトはアフィリエイト広告、バナー広告を利用しています。 2 ：以下、＼(^o^)／でVIPがお送りします：2015/02/06(金) 17:42:31.08 ID:flJZIImcH.net まずはドットインストール htt
2015年これからのWeb制作業界の流れ、伸ばしておきたいスキル、Webデザインのトレンドなどのまとめ
数多くのブログで2015年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目すべきキーワードは、Material Designの本格始動、マイクロデザイン、スクロールコンテンツ、スマフォ・タブレットユーザーの更なる増加、そしてHTML/CSSのフレームワークの陰り。 写真：re:splashed 2015年、現在のWebデザインを確認しながらこれからのトレンドを探る 2015年、Web制作業界全体の流れ 2015年にあなたが目にするWebデザインのトレンド 2015年に大きく変化するウェブデザインの10の傾向 2014年のトレンドで良かったもの、ダメだったもの モバイルデザインに向けたWebデザインの7つの戦略 2015年、IT系で求められているスキル 2015年、現在のWebデザインを確認しながらこれからのトレンドを探る
企業Web担当者なら取得したいWeb解析・マーケティングに関する資格10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのエリカです。 さて、世間にはさまざまな資格がありますよね。Web関連の資格をとっても、技術系だけではなく、解析、マーケティング、そしてリテラシーといった多岐に渡る分野の資格が存在します。 そこで今回は、知ってるようで知らない、企業のWeb担当者におすすめの資格について紹介していきたいと思います。 長くWeb担当をされている方は知識の確認や棚卸しに、最近担当になったばかりという方はスキルアップのために、ぜひチャレンジしてみてはいかがでしょうか。 ※受験料のほか、認定、受講、テキストなどの費用が別途発生する場合もあります。 ※下記掲載の受講・受験料は2014年10月現在のものとなります。 企業のWeb担当者におすすめの資格10選 1. WACAウェブ解析士認定講座 http://www.web-mining.jp 「一般社団法人 ウェブ解析士協会」が認定するウェブ解析
ディレクターがワイヤーを書く直前にやるべき超細かい事あれこれ
ども。ナカムラです。 今回はいつもの「やたら上位に食い込みたがるディレクターズマニュアルの記事」と比べるとかなり粒度細かめ。 実際の現場でディレクターがワイヤーを書くその前に「やらなければいけないこと」とその理由について解説してみたいと思います。 ちなみに、お題は「既存コンテンツありのリニューアル with Word Press 案件」と仮定してみます。 さて、ワイヤー書く前にディレクターって何やればいいんでしょうね？ とりあえずサーバー周りの情報整理 WordPressに限らず、どんな案件でもまぁ必須。なんかしらCMSを乗せる場合であれば間違いなく事前に確認しておかないと大怪我するアレですね。 とりあえずLAMP動くかどうか？とセキュリティ系の情報くらいは整理しときます。 この辺の情報は1枚のドキュメントにまとめといたほうが後で楽かもですね。 既存のページ調査 リニューアルであれば、まず
今からでも間に合う！レスポンシブWebデザイン作り方のまとめ
photo by Scolirk 地方でもマルチデバイス対応を求められることが多くなってきました。 徐々に対応しているところが増えてきたためだと思います。 私も昨年からレスポンシブWEBデザインについて、 対応する必要がありましたので、調べたものをまとめてみました。 もくじ レスポンシブWebデザインとは？ ギャラリーサイト レスポンシブWebデザインの作り方 画像の切り替え・最適化 レスポンシブ対応のフレームワーク レスポンシブ対応のライブラリ サイトの高速化 レスポンシブWebデザインとは？ 2年程前から流行し始めたレスポンシブWebデザイン。 基本的な考え方、メリット・デメリットを理解しておかないとトラブルの元になります。 レスポンシブWebデザインの基本 レスポンシブWebデザインの基礎 必読！5分でわかる流行のレスポンシブWebデザインまとめ | 株式会社LIG 5分で分かるレス
レスポンシブウェブデザイン制作で悩むブレイクポイントのまとめ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
ブレイクポイントの考え方 レスポンシブウェブデザインを実現するのによく使われる手法がメディアクエリを使った画面サイズ別スタイリングです。レスポンシブウェブデザインの場合、ある画面サイズを境目として適用させるスタイルを切替えますが、この境目を『ブレイクポイント』といいます。 この『ブレイクポイント』ですが、特に「こうするべき」というものが今のところありません。この境目をどの値にするかもそうですし、何分割させるのかというのも制作者がいろいろ試行錯誤しています。 これまでのウェブ制作では、デスクトップの場合はアクセス解析からよく見られている画面サイズを分析、モバイルは横幅240pxが主流、などの明確な指針があったのでそれに合わせたデザインを行えば問題ありませんでした。 しかし多様なデバイスが次から次へと出てくるようになり、PCやタブレット、スマートフォンだけでなく、テレビやウェアラブルタイプのデ
レスポンシブWebデザインの作り方（簡単設定方法）
webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile（ウェブモバイル）は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。 運営歴はかれこれ10年以上です。 私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。 今のメイン機はGooglePixelとiPhone15ProMAXです。 昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ本社に行くこともありました。 UQモバイル公式グッズをたくさん手に入れる機会がありました。 東京新宿にあるLINE株式会社に招待して貰っ
必読！5分でわかるレスポンシブWebデザインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
二度目まして。デザイナーの野田です。 レスポンシブWebデザインについて、僕なりにまとめてみたのでご覧下さい。今回は、制作に関することではなく、最低限知っておかなければならないことの基本編になります。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ レスポンシブWebデザインとは 「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。 現在はPCやスマートフォンなど、デバイス毎に各HTMLファイル
レスポンシブWebデザインのブレークポイント調査
iPhone、iPadを基準にした数値が目立ちます。 レイアウトをPC、タブレット、モバイルで変更すると考えた時に、 代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。 しかし、例えばブレークポイントをiPad基準にした768pxにすると、 幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。 ブレークポイントの数 少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。 ただし、多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、 ごく一部のコンテンツのみ調整するといった使い方をしています。 例えば下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。 Remodelista: Sourcebook
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
