2016年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
数多くのブログで2016年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、UI/UXはユーザーありきを忘れずに、洗練されたUIパターンとコンポーネント、旧バージョンIEのサポート終了、静的ページのジェネレーター、ページの肥大化。 淡いピンクとブルーは、今年のトレンドカラーのローズ クォーツとセレニティ 参考: 2016年のトレンドカラーはやさしい色、春の10色も素敵なカラーが揃ってる！ 2016年、Webとグラフィックデザインのトレンドと今後の展望 2016年、Web制作業界全体の流れ 2016年、注目されている新しいテクニック・コンセプト 2015年に定義されたレスポンシブWebデザインの8つのトレンド 現在のトレンドから見た良いこと、良くないこと、そしてダメなこと 2016年に学ぶべきプログラミング言語と
バナーデザインのコツ11選！初心者が気をつけるべきポイント、ビフォーアフターも紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。デザイナーののっちです。 好きな業務の1つがバナー制作なのですが、最初の頃は「決められた空間に文字と画像を詰めて、さらには綺麗に見せて……」と、まるでジグソーパズルのようなあの作業にもの、すごーーく時間がかかっていました。これは新米デザイナーなら、誰でも一度は通る道だと思います。 そこで今回は、新米デザイナーが知っておきたい“美しい”バナーを“効率的”に制作するためのフローについてまとめます。 独学でつまずいていませんか？ バナーデザインの作り方を効率的に学びたい、プロに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年2月に編集部が情報を更新し
作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。
ややうさんくさい感じのするタイトルですが、ホントの話なんです。 海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。 SPECCTRについてごく簡単に説明すると… フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる というものです。 これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。 また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄
新人デザイナーに教えたいWebデザインの基本原則【整列】
以前私は、デザインの勉強を一切したことの無いデザイナー志望の新入社員に、webデザインを教える教育係を任されたことがあります。 教育なんて簡単なんじゃないの？と安易に考えた私は、案の定痛い目を見たわけです。この日から1ヶ月間、私は毎日3時間残業する羽目になってしまいました。 人に教えるのは意外と難しく、何から教えたら良いのかすらわかりませんでした。ただやはり最初なんで基本が大事だろうと思い、先輩達のアドバイスを受けながら、【デザインの基本原則】を教えることになったわけです！ 今まさに新人教育に困っている人がいれば、まずこの記事を読んでもらって見てください！新人デザイナーに教える手間が1.2時間はぶけるかもしれません！(記事がわかりにくければ読ませないでください。その時はごめんなさい) では、早速本題に入りたいと思いますが、まずは私が新人デザイナーに初めに教えることにした【レイアウトデザイン
CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css
Normalize.cssって何？ CSSリセットとは違うの？ どうやって使うの？ といった疑問を解決するNormalize.cssの制作者自らの解説を紹介します。 About normalize.css [ad#ad-2] 下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴 ノーマライズ vs リセット Normalize.cssの使い方 終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。 normalize.cssの関連サイト Normalize.cssの本サイト Normalize.cssのソース Normalize.cssのドキュメント Normal
水彩タッチの美しいエフェクトをウェブデザインに取り入れるチュートリアルのまとめ | コリス
水彩タッチの背景の作り方をはじめ、写真画像を水彩タッチにしたり、水彩タッチのマスクをしたり、ウェブのレイアウトやエレメントに水彩タッチを取り入れるチュートリアルをnoupeから紹介します。 Beautiful Water [...]
デザインの引出しを203%拡張させる神Webサイトデザインギャラリー | 秒刊SUNDAY
前回このＷＥＢサイトギャラリー特集を行った際には、フルFlash,フルスクリーンのカッコイイサイトが主流でした。当たり前のようにウインドウが最大化 し、当たり前のようにヌルヌルとＦｌａshが動く。時代は変わったもので、もはやFlashのフの字を聞くだけで『iPadじゃ見れないからねー』が付き まとう今日、ＷＥＢデザインはどのように設計したらよいのでしょうか。今回はそんなＷＥＢサイトデザインに役立つサイトをご紹介したい。 ◆Webデザインポータルサイト ■Webデザインのリンク集 Webデザインポータルサイト S5-Style スタイリッシュで非常に見安いサイト。次々に事例を見て行っても苦にならない。 ◆Webデザインリンク集・ソーシャルブックマーク ■Webデザインリンク集・ソーシャルブックマーク - 最近ページングではなくスクロールローディングに変更された。わざわざページングしなくても良
確実に進化している！CSS3アニメーションで実装する10種類のナビゲーション
Example 10 エレメントのサイズとカラーを変更し、重なり順も変更。 実装 HTML HTMLの構造は、アイコン、メインテキスト、サブテキスト、3つをli要素に含めます。 <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> ... </ul> [ad#ad-2] CSS アイコンに使用しているのは画像ではなく、シンボルフォントを使用します。 @font-face { font-family: 'WebSymbolsRegul
jQueryで手軽にサクッとシンプルなニュースティッカーを作る
今更なTipsなんですけど、まぁ自分用の 復習的な記事です。カスタマイズしやす いニュースティッカーを作るコードで、 1行でも4行でも画像でも、cssで見た目 をスタイルするだけで少量のコードで 実装する事が出来ます。 いろいろプラグインを紹介しておいてアレですけど、実際プラグインに依存すると困ることのほうが多いので簡単なものは簡単なコードで実装出来る程度にはしておきたい所ですね。 Sample:01ティッカーです。実際こんな風には実装せず、目立たないところに配置しますけど・・ 以下のコードで実装します。 function ticker(){ $('#news li:first').slideUp( function(){ $(this).appendTo($('#news')).slideDown(); }); } setInterval(function(){ticker()}, 50
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
デザイナーからデザインの基礎や原則を学べるエントリーまとめ（webデザイナ向け）
webデザインの入門書を買おうか迷っている方。 もしもそんな方がいたら、ネット上にはここを押さえておこうよと、webデザイナーが直接良質な記事を仕上げてくれていますのでそちらを是非一度参考にしてみて欲しいなと思いまとめて見ました。 また、その記事で、もっともぐっときた台詞もチョイスすてみました。 どんな想いで記事を書かれているかというのも大事かなと。 こちらもあわせてどうぞ。 Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報 とりあえず時間のない人はこの3つだけでも食べて デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則 最初、デザイナーは型破りであるというイメージを抱く人も多いのですが、実際の現場では、様々な原則の上にあるルールにのっとり、そのルールを崩す「理由」があります。 例えばそれがセンスと呼ばれること
ホワイトスペース使ったウェブデザインの考え方
ウェブサイトの要素をレイアウトをする際に非常に重要な ホワイトスペースの考え方について、すこしまとめてみました。 私が人にウェブデザインを教えるときは、まずここから始めます。 boxとboxとの空間の開け方、要素と要素の「間」は、音楽でいうところの「リズム」だと考えています。 リズムが整っていれば、他の要素が主張したことが上手に伝わります。 リズムが整っていなければ、けんかしあい、不協和音＝見づらい状況を作り出します。 自分なりのリズムを見つけていけば、それが個性・ジャンルになるのです。 どれが間違っている、というお話ではなく、どんな風に感じたかを大事にして読んでみてください。 とてもとてもシンプルな例を出してみます。 AとBを比較してみてください。 どちらのほうが読みやすいように感じますか？ どんなふうに感じましたか？ この例では、Bのほうに大きな余白を与えました。 ４隅すべて同じぐらい
素人っぽいデザインから脱却するための12のデザインチップス | webox blog
クオリティを上げるためにはちょっとした「こだわり」がとても大事です。 定期的に話題になるネタで恐縮ですが、素人っぽいデザインにならないように個人的によく使ってる小技をまとめました。 上のものほど、簡単で多くのデザインに使える小技になります。 1pxのボーダーを使う 1pxの効果を使うのと使わないのでは、デザインの質に大きな違いが生まれます。 ある意味Webデザインでは一番重要な要素かもしれません。 定番です。たった1pxのボーダーをつけるだけでシャープな印象になります。 ただ塗りつぶしただけ、グラデーションを入れただけのボタンでは、のっぺりとした感じになりやすいですが、1pxのボーダーを上部に入れるだけでシャープな立体を表現できます。 正確には1pxでなく2pxですが、こうして黒系のボーダーと白系のボーダーを並べることで、明確にかつシャープに仕切りを表現できます。 1pxのドロップシャ
HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとか - かちびと.net
あまりに情報量が多くて混乱してきたので 自分用にまとめ。リファレンスとか、ちゃんと 実践で使えるツールを自分なりに厳選して まとめておきます。どうも、あっちこっちで あれが便利とかこれが便利だとか言われる と訳が分からなくなるのでそろそろ絞らない とですね。 というわけでお遊びではなく実践に役立ってる基本的なリファレンスとか助けてくれるツールのメモなので目新しいものはありません。完全に自分用のまとめです。個人的には基礎用のサイトと、実践向けのツールやライブラリだけあればいいという感じです。 尚、css3/html5に関する情報だけを求めている&特に情報取得に急いでないならdotHTML5というサイト1つで事足りるかと思います。 ※W3Cは割愛でいいですよね チートシートとかリファレンスだけで基本的にはいい感じですかね・・ HTML5 タグリファレンス マークアップもままならないほど慣れてな
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
CSS3対応、スタイルシートの記述で気をつけるべき19のポイント
The CSS Lint Rules [ad#ad-2] 以下は、スタイルシートをオンラインでチェックできるツール「CSS Lint」で使用しているルールを意訳したものです。 スタイルシートの記述で気をつけたい19のポイント スタイルシートの記述ミスはしない これは一番大切なことです。 1文字でもタイプミスをしないようにしましょう。 隣接クラスは避ける 「.foo.bar」のような隣接クラスはIE6などでサポートしてないので、使用には注意してください。 空のルールを残しておかない 空のルールとはプロパティを指定していないものです。 .foo {} これは単にファイルの容量を肥大化させるだけなので、削除します。 display使用時のプロパティに注意 スタイルシートではプロパティのグループを一緒に定義することができますが、displayを使用する際には下記のものがそれぞれ無視されます。 di
デザインの基礎、黄金比から大和比、第2黄金比まで - kojika17
よく黄金比という言葉を聞いたりしますが、実際にどういうものかわかっていなかったり、 デザインの当てはめ方が分からなかったりすることが多いので、簡単にまとめてみました。 貴金属比 nの場所に自然数が入り、第1貴金属比を黄金比、第2貴金属比を白銀比、第3貴金属比を青銅比といいます。 よく聞く黄金比は、貴金属比の１つです。 近似値 1.6180(約5:8) CSSで黄金比を見る 伝承では古代ギリシアから使われ始めたと言われています。 パルテノン神殿、モナリザなど数多くの建築物や美術、アートなどに使用されています。 白銀比 白銀比には、以下の2つがあります。 1:1+√2 の第2貴金属比に含まれる白銀比 1:√2 の日本で古くから使用されている白銀比(大和比) どちらも白銀比と呼ばれることが多いので、紛らわしいです。 白銀比(第2貴金属比) 近似値 1:2.414(約5:12) CSSで白銀比を見
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]ユーザーを楽しませる気持ちいいエフェクトがたくさんあるCSS3のデモサイト -CSS3 Playground
UIデザイン
創造力と遊び心がくすぐられるHTML5でつくられたウェブサイトのまとめ