最近流行の斜めのデザインをSassで実装する理想的なコードを考えてみた！
斜めのデザイン、流行っていますよね。いろいろな実装方法がありますが、柔軟で使いやすい、疑似要素を使ったSassのコードを考えてみました。 最近、Webサイト制作でデザインガイドラインの一部としてティルト角（tilted angle）を頻繁に使う必要がありました。この記事で「ティルト角」とは、次のように（Webページの）上か下の辺が完全に水平ではなく少し傾斜している部分を指すものとします。 ティルト角の実装方法はたくさんあります。base64でエンコードした画像を背景に適用して（カラーや角度などの）カスタマイズで大変な思いをした経験があるかもしれません。 positionをabsoluteに指定した疑似要素（pseudo-element）にskew（ゆがみ）やrotate（回転）を適用する方法もありますが、形がゆがんで（skew transform）しまうので、これも避けたいことの1つです。
流行なんて関係ない！いつでも使える黄金ウェブレイアウトUIパターン12個まとめ
海外サイトUXPin Studioで公開された「Web Layout Best Practices: 12 Timeless UI Patterns Analyzed」の著者 Jerry Cao より許可をもらい、翻訳転載しています。 ウェブサイトを訪れるユーザーの多くは、コンテンツを楽しみにしており、デザイン目的で訪れているわけではありません。 この記事では、いつの時代にもマッチする、12種類の黄金ウェブレイアウトパターンを問題点や解決法、具体的な使い方のポイントと一緒に見ていきましょう。 コンテンツ目次 01. カード型レイアウト 02. グリッドレイアウト 03. マガジンレイアウト 04. 枠なしレイアウト 05. スプリット・スクリーンレイアウト 06. 単一ページレイアウト 07. F型パターンレイアウト 08. Z型パターンレイアウト 09. 水平方向の左右対称パターンレイア
ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
2016年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
数多くのブログで2016年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、UI/UXはユーザーありきを忘れずに、洗練されたUIパターンとコンポーネント、旧バージョンIEのサポート終了、静的ページのジェネレーター、ページの肥大化。 淡いピンクとブルーは、今年のトレンドカラーのローズ クォーツとセレニティ 参考: 2016年のトレンドカラーはやさしい色、春の10色も素敵なカラーが揃ってる！ 2016年、Webとグラフィックデザインのトレンドと今後の展望 2016年、Web制作業界全体の流れ 2016年、注目されている新しいテクニック・コンセプト 2015年に定義されたレスポンシブWebデザインの8つのトレンド 現在のトレンドから見た良いこと、良くないこと、そしてダメなこと 2016年に学ぶべきプログラミング言語と
FireworksからPhotoshopへ移行するためにすること。 | ネクストページブログ
HOMEブログウェブ制作FireworksからPhotoshopへ移行するためにすること。 | ネクストページブログ こんにちは！ デザイナーのiuchiです。 2013年に開発終了が発表されたFireworksですが、大勢のFireworksユーザーは、他ツールへなかなか移行できずにいるのが現実ではないでしょうか。 SketchやIllustratorなど代替ソフトの候補は色々ありますが、やはり業界で一番スタンダードであろうPhotoshopは外せませんよね。 今回はFireworksユーザーが、PhotoshopでWebデザインをする際に知っておくと便利なTipsをまとめてみました。 ★前準備 CS6以前のユーザーはCCに移行する CS6以前と比べ、最近のPhotoshopはWebデザインをする為の機能が少しずつ追加され、以前より使いやすくなってきました。 グループにレイヤー効果を適用
WEBデザインのセオリー
WEBデザインにおけるセオリーの定番はいくつかある。 規則・不規則、動線・導線、配色、利便性、アクセシビリティ考慮や、人間工学に基づく動作設計。 挙げるとキリが無いので、ぜひこの記事を書いた発端である「Webデザインセオリー Advent Calender 2015」にきっと有用な記事がこれからたくさん挙がるので乞うご期待！ 僕個人として、セオリーと聞いて先ず一番に思ったのは OS・ブラウザ・デバイスに対する適切な設計 デザインツールや紙の上だけでデザインすると、どうしても抜けるところが出てくるので、やはりPCやスマフォ実機テストやプロトタイプテスト、出来るだけ本番に近いサーバ環境でのテストサイト構築がWEBデザインでも重要なのは変わらないところ。 気をつけたいポイント OSやブラウザそのものが持っている動作を損なわないこととか。 PCだったら、スクロールや右クリック、マウス
メガメニュー・メガドロップメニューを実装しているwebデザインのショーケース - NxWorld
情報量が多いサイトで特に見かけることが多い、メガメニュー・メガドロップメニューを実装しているwebデザインのまとめです。 メガメニュー・メガドロップメニューとは表示面積が広いドロップダウンメニューのことで、上手く利用すればスペースを有効活用して、ユーザーが目的のページまで容易に辿り着けるようなナビゲーションを実装することができます。 ホバー展開するもの、クリック展開するもの、テキストのみを使用したもの、わかりやすい画像・アイコンを用いたものなど、同じメガメニューでも様々な表示方法やデザインがあるので、自分がこういった動きやデザインをしたいときに参考にさせてもらえそうなwebデザインを備忘録兼ねてまとめました。 紹介しているサイトのキャプチャは、それぞれホバーしてもらうとメガメニュー表示時のデザインに切り替わります。 ページ左上のロゴ下にあるカテゴリーにホバーすると各カテゴリーが表示され、更
デザインがしっくりこないときに試すこと10選【新米デザイナー向け】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザイナー兼踊り手のJona（＠jona_yawaraka）です。わたしはLIGブログに掲載されるアイキャッチ（ブログ記事の顔になる画像）、バナー、背景ジャック（大型バナー）など、さまざまな画像を製作してきました。 画像をつくって客観視したとき、「ある程度まとまってはいるんだけどなんだかしっくりこない。でも何が悪いかわからない……」ということありますよね。 わからないときはとにかく手を動かして、いろいろと試してみるとうまくいったりするもの。ということでデザインがしっくりこないときにとりあえず試したい10の簡単な方法を、私の経験を踏まえながら紹介いたします。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情
UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
初めまして。アメリカからやってきたUIデザイナーのCorey（コーリー）です。 LIGの転職サービス「Poole」でUIデザインをしています。 PhotoshopやIllustratorをメインとして使うデザイナーは多くいると思いますが、私はPhotoshopをほとんど使いません。1年前にSketchへ乗り換えたからです。 現在、日本のデザイン界ではSketchはそれほど使われてないかもしれませんが、海外ではSketchが大ブームになっています。 今回は私が最強なPhotoshopからSketchへ乗り換えた理由をお伝えします。 Sketchへ乗り換えた理由（Why I Use Sketch） http://bohemiancoding.com/sketch/ 1. UI Design中心 Sketchは完全にWebとモバイルUIデザインの専用ツールなので、それ以外の余計な機能が入っていま
Bootstrap 3でレスポンシブ対応のwebページをつくろう！グリッドシステムの基本な使い方
Bootstrapはここ数年人気が非常に高く、多くのWebデザイナー・制作者がレスポンシブ対応のWebサイトを作るための本当に便利なツールです。使いやすいclassを備えたモジュール式のフレームワークで、カスタマイズ性にも非常に優れています。 Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方を解説した記事を紹介します。 Installing Bootstrap and the Bootstrap Grid System 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Bootstrap 3の特徴 Bootstrapのダウンロードとインストール Bootstrapのファイル構成 このチュートリアル用のファイル構成 デバイス用のclass コンテナの実装と配置 グリッドの実装 オフセッ
WD101 : could
WD101: PC脳な制作者にありがちな8つのアプローチ デスクトップパソコン時代と同じような感覚で設計されているスマートフォン向けサイトは少なくありません。PC脳から抜け出して、今必要とされるデザインの感覚を養わなければ、ますます利用者のニーズから遠ざかってしまいます。 WD101: 画面ではなく部品から始めてみよう 利用者環境を断定してページレイアウトを作れなくなった今日の Web デザイン。ページという枠を作ることから始めるのではなく、コンテンツをまとめる最小単位「コンポーネント」の設計から始めます。 WD101: Webデザインであるもの、そうでないもの これから「Webデザインしたい！」と考えている人たちが、何をもって良い Web デザインなのかが見え難くなる場合があるので、ひとつの方向性を示した項目を幾つか挙げてみました。 WD101: Webのデザインは枠のない世界である 適
こんなやり方があったとは！IllustratorやSketchでWebデザインをはじめる前に必ず読んでおきたい -ベクターデータの教科書
最近のWebデザインに、ベクターデータの存在は欠かせないものになってきました。 アイコンやロゴなどをSVGで使用したり、Webページやアプリのデザイン・UI設計といった制作のワークフローをベクターで作業している人も増えてきました。 今までPhotoshopでデザインをしていた人には、IllustratorやSketchを使うとそんな事もできるのか！ と目からウロコかもしれません。 IllustratorのWebデザインならではの使い方、Sketchの詳しい使い方を知りたい、SVGの効果的な使い方をマスターしたい、そんなWeb制作者に絶対オススメの一冊を紹介します。 IllustratorやSketchで扱うベクターデータには、マルチデバイス対応のWebデザイン・実装にとって大きなメリットがたくさんあります。
WordPressでかっこいいページが簡単に作成できる！レイアウトを組み合わせて直感的に作成できるテーマ -Layers
WordPressには数多くのテーマファイルがありますが、それらとは少し違ったアプローチのテーマ「Layers」を紹介します。 ページ作成にはHTML/CSSの知識は不要で、レイアウトやウィジェットを組み合わせてかっこいいページを直感的に作成できます。 Layers Layers -GitHub ライセンスはGPL 2.0 Licenseで、商用利用、修正、配布などが無料で行えます。 通常のテーマファイルはデザインが完成していて、画像やテキストを配置しますが、Layersはベースとなるレイアウトが数種類あり、そこにコンポーネントやウィジェットを自由に組み合わせてページを作成します。 ページのデザインを見ながらカスタマイズできるテーマという感じです。 組み合わせるのは簡単で、下記ページで動画で公開されています。
今からでも間に合う！レスポンシブWebデザイン作り方のまとめ
photo by Scolirk 地方でもマルチデバイス対応を求められることが多くなってきました。 徐々に対応しているところが増えてきたためだと思います。 私も昨年からレスポンシブWEBデザインについて、 対応する必要がありましたので、調べたものをまとめてみました。 もくじ レスポンシブWebデザインとは？ ギャラリーサイト レスポンシブWebデザインの作り方 画像の切り替え・最適化 レスポンシブ対応のフレームワーク レスポンシブ対応のライブラリ サイトの高速化 レスポンシブWebデザインとは？ 2年程前から流行し始めたレスポンシブWebデザイン。 基本的な考え方、メリット・デメリットを理解しておかないとトラブルの元になります。 レスポンシブWebデザインの基本 レスポンシブWebデザインの基礎 必読！5分でわかる流行のレスポンシブWebデザインまとめ | 株式会社LIG 5分で分かるレス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホに合ったステップリストをインラインSVGで ｜ スターフィールド株式会社
MockUPhone
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
http://2ndidea.com/html5/html5-coding-without-html5shiv/
新着記事
飲食系Webサイト制作で気をつけたい10個のポイントまとめ - PhotoshopVIP
