【2018年流行りそう！】気になるWebデザイントレンドまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの藤田です！ 毎回、同じことを言っておりますが、技術の進化と共にWebサイトの表現も目まぐるしく変わってきておりますね。 油断をすると次々と見たことのない表現が増えていく今日この頃なので、自身の備忘録も兼ねてサイト制作に取り入れたいWebデザインのトレンドをまとめてみました！ よろしければ皆様もご覧ください。 2018年気になるWebデザイントレンド 画像を揺らす デザインにひと味足す方法として、最近よく見かけるのがシェーダーで画像を揺らす手法。 アイキャッチに対して誘目性が高まりデザインに奥行き感が出るのが良いですね！ http://www.themustafacelik.com/ http://culture.basicagency.com/ パララックス 手前のものは早く動き奥のものはゆっくりと動く視差効果をスクロールアニメーションに取り入れるこの技術は４〜５年
マテリアルデザインとは|始め方とフレームワーク10選｜フリエン
（画像：Google Design） “マテリアルデザイン”とは、2014年にGoogleが提唱した、UI/UXを軸とした概念です。単純にデザインを指すだけでなく、開発技術や設計、アイディアや試みなどを総合してマテリアルデザインと称します。 Googleがマテリアルデザインのガイドラインを発表して以降、Googleが開発するandroidを中心に様々なマテリアルデザインが生み出され、目にすることも多くなってきました。しかし、この“マテリアルデザイン”を明確に説明できる人は少ないです。 “マテリアルデザイン”は、ユーザを第一に考えた、参考になる概念を数多く提唱しています。今回は、マテリアルデザインとは何なのか、その特徴と他のデザインとの違い、便利なフレームワークを紹介します。
高級感あるWebサイトをデザインするときに参考になるサイトと、7つのコツまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、まきこです。好きなハロプロの秋曲は「ハピネス～幸福歓迎！」です！ さて今回は、「Webサイトの高級感ってどうやったら表現できるの？」という課題について考えてみます。デザイナーとして仕事をする上で、「もっと高級感がほしい」というオーダーは多いんです。そんなときでも迷わず解決に向かってひた走れたら、デザイナーとしても高級になれるはず！ ということで、わたしが個人的に「高級感がある」と感じたサイトを、その高級感を醸成している理由ごとにご紹介していきます。 1. クオリティーの高い写真 オークヴィレッジ木造建築研究所 https://www.oakv.co.jp/kenchiku/ 木造建築を専門とする建築事務所のサイトです。まるで写真に使われている家で暮らしているかのような気持ちになる、臨場感あふれる写真がトップページに大きく使われています。 Equipos de Aire Acon
すべて無料！商用利用可能なオススメ数字フォントとその選び方を紹介！
ホームページやプレゼン資料で何かとアピールすることの多い「数字」、できれば見た目までこだわりたいもの。 特にサービスの導入実績数や料金などは、フォントを工夫して魅力的に見せたいところです。パソコン内に含まれているデフォルトのフォントでは物足りない方もいるでしょう。 今回は、数字フォントを選ぶ際のポイントと、無料で商用利用可能な数字フォントを20種類紹介します。簡潔かつ印象的に商品・サービスのアピールを行う必要があるLPの作成にも役に立つでしょう。 ▼パワポで資料を作る機会の多い方におすすめ 【パワーポイント作成】伝わるデザインのコツ ほんの一手間で驚くほど見やすく変わる！パワーポイントやGoogleスライドなど資料のデザインを見やすく仕上げるコツを解説します。 読み取りやすい数字フォントを選ぶポイント 数字のフォントを利用する際には、その数字がどういった狙いを持ってデザインに組み込まれてい
1日に何度もFacebookを見てしまうのはなぜ？モバイルUXの主流になりつつある「Alive Design」とは
約10年のスマートフォンの歴史の中で、アプリデザイナーやUXデザイナーが考えてきたことはずっと*「この小さな画面でどうやってユーザーに心地いい体験をしてもらうか」*ということではないでしょうか。 画面が小さいので過度な装飾はできません。とはいえ単調なデザインでは飽きられてしまいます。 そこで登場したのが、*「マイクロインタラクション」*という考え方です。 マイクロインタラクションとは、小さなアニメーションを使って現在何が行われているかをフィードバックしたり、進行中のプロセスの状況を伝えたりするコミュニケーション手法のことです。 参考： マイクロインタラクションとは？UXに取り入れる際の5つのポイント これまでマイクロインタラクションは、モバイルデザインにおいては全体の中の*「要素の一部」として考えられてきました。 しかし最近では、これまでの「Static Design」(静止したデザイン)
基本がわかる！新規ドキュメントの作成| psgips
【Photoshop基本操作】新規ドキュメントとは、絵を描く前に用意する、白いカンバスのようなものです。Photoshop を起動して、いちばん最初に行う操作でもあります。[ 新規ドキュメント ] ダイアログでは、ファイル名やドキュメントサイズ、解像度などを設定します。
300万PV超えの人気Webメディアはどのように作られているか
人気の秘密を探る この記事では人気のウェブメディアがどのような戦略・デザインでユーザーを集めているのかを分析します。対象は月間PV数が300万PV以上のメディア。それほどに読まれる仕掛けはどこにあるのでしょうか。
レイヤーからの画像アセットの生成
Photoshop ユーザーガイド Photoshop の概要 夢をカタチに Photoshop の新機能 初めての写真編集 ドキュメントの作成 Photoshop | よくある質問 Photoshop の必要システム構成 Photoshop とは Photoshop とその他の Adobe 製品およびサービス Photoshop で Illustrator アートワークを作業する InDesign での Photoshop ファイルの操作 Photoshop 用 Substance 3D マテリアル Photoshop の Capture アプリ内拡張機能の使用 Photoshop iPad 版（中国本土ではご利用いただけません） Photoshop iPad 版 | よくある質問 ワークスペースについて システム要件 | Photoshop iPad 版 ドキュメントの作成、表示、書き
【スライス不要】Photoshop画像アセット生成の基本とつまずきがちな5つのコト | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） スライスせずに書き出せるPhotoshopの「画像アセット生成」って？ 画像アセット生成とは、ファイルのレイヤーやレイヤーグループのコンテンツからJPEGやPNG等の画像アセットを生成するという、スライス作業を不要とする機能です。PhotoshopCCから実装されている機能で、CC2014以降は画像に加えてSVGの書き出しも可能となりました。 普段からコーディングもしているデザイナーさんは効率化のために早くから使ってい
Web担当者必見！ワイヤーフレーム作成時の注力ポイント9個と便利ツール20選
ホームページを作成する際、必ずといっていいほど作成するのが本番用デザインの設計図である「ワイヤーフレーム」です。 ワイヤーフレームは一般的にWebディレクターが作成しますが、デザイナーに渡した時に「どう作ればいいかわからない」などのフィードバックを受けた経験はないでしょうか。 プロジェクトを円滑に進めるためのコミュニケーションツールでもありますので、あくまで設計図とはいえ適切に作成したいものです。 そこで今回は、ワイヤーフレーム作成時に気を付けたいポイントと便利なツールをあわせてご紹介します。 ワイヤーフレーム作成で悩んでいるWebディレクターの方は、参考にしてみてください。 参考： 新人Webディレクターの基礎、制作の現場で使うワイヤーフレームの作り方｜ferret ワイヤーフレーム作成の注意ポイント9個 1. アイデア出しは個人でしっかりと行う http://mindmap.jp/00
2016年に注目したい、グラフィックデザインのトレンド9個まとめ
デザイントレンドとは、あらゆる文化やメディア、過去と現在、テクノロジー、ファッションなど、さまざまな分野から影響を受けています。つねに移り変わっていくもので、正確にいつ終わるとは決めにくいものです。 アメリカ・グラフィック・アート協会（The American Institute for Graphic Arts : AIGA）のMedeleine Morleyは、以下のように述べています。 トレンドは毎年出現して、煙のように消えてしまうわけではありません。その代わりに少しずつ人気が出始め、時間がたつと気づかれないまま立ち消えてしまいます。 今回紹介するデザイントレンドは、2015年の終わりごろから、魔法のように急に出てきたわけではありません。トレンドがピークに達するまでには時間が必要で、ここ数年でいくつものトレンドを見てきています。 トレンドをあまり意識しないデザイナーも、働いている分野
打ち込むより簡単！保存しておくと便利なCSSスニペット18選
ホームページを製作する際、何度も繰り返し使うコードはスニペットとしてまとめておくと便利です。 スニペットとは「切れ端」「断片」という意味で、プログラミング言語の中で簡単に切り貼りして再利用できる部分のことです。 とりわけCSSは、HTMLやJavaScript以上に、繰り返して使うコードが多いので、そうしたコードをまとめておくとよいでしょう。 今回は、何度も打ち込まなくてもコピペで使える、保存しておくと便利なCSSスニペットをまとめてみました。 スニペットとしてテンプレート化することで、一部分を変えるだけで再利用することができます。 保存しておくと便利なCSSスニペット 1. CSSリセット さまざまなブラウザでデフォルトの表示方法がありますが、それらを同じように表示させるCSSリセットと呼ばれるテクニックがあります。 CSSのリセット化コードはさまざまありますが、画像のレスポンシブ化とm
CSS3(transition)で円の中心を基準に拡大する丸いボタンが並んだメニュー
最近丸いデザインが流行っているらしいので、丸いボタンが並んだメニューを作ってみました。CSS3のtransitionでスムーズに拡大します。円の中心を基準に拡大するところが今回のポイントです。 そもそもこいうのはメニューと呼ばないのかな。検索エンジンのことを考えると色々キーワードを入れたいけど、入れすぎると何をいっているのか分からなくなる。ほんとタイトルって難しい。。 ということで、今回もサンプルを用意していますのでこちら見ていただければと思います。 ではHTMLから解説していきます。 HTML まずはHTMLから。リンク先のURLは省略しています。 <div id="box"> <div class="boxin"> <a href="#" id="circle1">CSS</a> </div> <div class="boxin"> <a href="#" id="circle2">C
CSS3で作るシンプルなマウスオーバーアニメーション5種
Posted: 2011.06.15 / Category: HTML&CSS / Tag: CSS3, アニメーション css3はアニメーションもできてしまうわけですが、ここではわりと簡単につくれるマウスオーバーアニメーションをご紹介いたします。 Chrome、Firefoxで動作確認しております。 css3マウスオーバーアニメーションの基本 マウスオーバーアニメーションの前に通常のマウスオーバーをみてみましょう。 たとえばリンクの文字色をマウスオーバーしたときに変更したい場合はhover疑似クラスでcolorを指定しますよね。 css a { color: #3399FF; } a:hover { color: #FF6600; } これをアニメーションさせるには「transition」というプロパティを追加します。 transition: プロパティ名 時間 アニメーション方法 ;
スマホ対策に！CSS3追加セレクタと疑似クラスの書き方サンプル | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
九州ライターの村上です、皆さんこんにちは。最近最も嬉しかったことは筋肉痛がすぐに来たことです。そんな微妙なお年ごろ。 仕事でHTML/CSSの講師をしておりますが、近年スマートフォンの普及によりCSS3.0の導入も随分と浸透してきたように思います。あわせてセレクタの書き方が複雑になってきたので、今回はCSS3.0で追加されたセレクタと擬似クラスをまとめておきます。 実務でもよく使われるものには記述例を載せていますので、参考にしてください。 CSS3で追加されたセレクタと擬似クラスまとめ 属性セレクタ 構造疑似クラス ターゲット疑似クラス UI要素状態疑似クラス 否定擬似クラス 属性セレクタ 属性で設定した値に関するセレクタです。 E[Attr^=”val”] セレクタ［属性＾＝”値”］ Attr属性の値がvalで始まるセレクタに適用する。 【例】リンクの属性がhttpを含む（外部リンク）場
【実例付きで詳細解説】アフォーダンスをあなたはきちんと理解してる？ - プログラミングとデザイン、スタートアップの話
あらゆるデザイナーのバイブル『誰のためのデザイン』で紹介された「アフォーダンス」という言葉は、今や多くのデザイナーが日常的に使い、意識するキーフレーズとなっている。しかし、その使われ方が著者ノーマンの意図したものと違う形で広まってしまっているということで、彼は『誰のためのデザイン』の改訂版で、アフォーダンスに加えて「シグニファイア」という新たな言葉を定義し、その違いを説明している。 人間中心デザイン 発見可能性 アフォーダンスとシグニファイアとの違い デザイン関連で最近見つけた良書 人間中心デザイン 著者ノーマンの基礎哲学は人間中心デザインだ。 人間中心デザインでは、まず人間のニーズ、能力、行動を取り上げ、それからそのニーズ、能力、行動に合わせてデザインする。良いデザインは心理学とテクノロジーを理解する所からはじまる。良いデザインとはコミュニケーションを要するのである。 対象物とそれを扱う
clearfixの必要がなくなる新しいプロパティをW3Cが定義、一部のブラウザでもう使える！
clearfixが登場してから早10年が過ぎ、お世話になった人もたくさんいると思います。 そんなclearfixさんの必要性がなくなる新しいCSSのプロパティが、2017年1月25日にW3Cのワーキングドラフトで定義されました。まだ一部のブラウザにしか対応していませんが、たった一つの指定でフロートを簡単にクリアできます。
ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ
ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTML と CSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。 ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ コンテンツ目次 1. アコーディオンメニュー 2. サークル型ナビメニュー 3. ドロップダウンメニュー 4. フルスクリーンメ
Sass？ Scss？！ Less！？ CSSと何が違うの？ ・・まとめてみた。 - sparkle
最近、Sass・Scss・Lessなどの言葉が飛び交っています・・・すべて、CSS関連用語ですが、あなたはわかっていますか？わたしはわかっていませんでした（笑）。ということで、調べてまとめてみました。 それぞれの違い Sass Sassとは「Syntactically Awesome Style Sheets（構文的に素晴らしいスタイルシート）」の略。世界で最も成熟し安定した、かつ強力なプロ級のCSSの拡張したメタ言語なのだそうだ。CSSのすべてのバージョンと完全に互換性があり、シームレスに利用可能な任意のCSSライブラリも豊富。コーディングを一番簡略化できる。記法はSASS記法を用い、拡張子は.sass。 Scss Scssとは「Sassy CSS（生意気なCSS？？）」の略 。上記のSassの機能をCSS3(Media Queries等含む)文法と互換性がある形で再実装したもの。CSS
2017年要注目！2016年に人気となったWebデザイントレンド6個まとめ
Webデザインの世界は、幅広いSVGのサポートやCSSでできる新しいことも増えるなど、今後ますますエキサイティングなものとなるでしょう。2016年のデザイントレンドを振り返りながら、今年のデザイン動向と2017年に向けた新しいデザインアイデアをまとめてご紹介します。 コンテンツ目次 1. 高解像度のビジュアル 2. インタラクティブ・ナビメニュー 3. スプリットスクリーン・レイアウト 4. レトロスタイル 5. より複雑なレイアウト 6. アニメーション&マイクロインタクラション 7. 2017年に期待できるものとは 高解像度のビジュアル 英: High-Definition Visuals ヒーローイメージやフルスクリーンを利用したトレンドは、ビデオ動画や高画質なイメージ写真などさまざまな要素と組み合わせることで、今後もまだまだ続くでしょう。もはや鮮やかな写真イメージはポートフォリオサ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
