Web Designing Portal

Webクリエイターのための、
Webデザイン・Web情報のポータルサイト

Column
Clips: 127

ウェブデザインにおけるハンバーガーボタンについて考える「Analyzing the Hamburger Menu in Web Design」

Date : 2017.05.29

スマートフォンのメニューデザインの定番と言っても過言ではないハンバーガーボタン。当たり前のように利用されていますが、今回はそんなハンバーガーボタンに関して分析をした考察「Analyzing the Hamburger Menu in Web Design」をご紹介したいと思います。

ウェブデザインにおけるハンバーガーボタンについて考える「Analyzing the Hamburger Menu in Web Design」
open in a new window

なぜWebブラウザの文字組みは汚いのか?元エディトリアルデザイナーが解決策を提案します!

Date : 2017.05.25

こんにちは。入社以前はエディトリアルデザイナー(新聞・雑誌・書籍などの出版物のデザイナー)として書籍の装丁などもしていました。フロントエンドエンジニアのほりでーです。 今回は紙のデザインとWebデザインにある大きな違いのひとつ、「文字組みアキ量」というものについてお話しします。日本語組版のルールにも詳しく触れていくため、Webの経験しかない方も是非読んでみてくださいね!

なぜWebブラウザの文字組みは汚いのか?元エディトリアルデザイナーが解決策を提案します!
open in a new window

インスピレーションが湧き出る!芸術的なフランス発のホームページ7選

Date : 2017.05.24

フランスの首都パリは、19世紀以降、「芸術の都」と呼ばれることがあります。 一説によれば、ナポレオン時代に、国王の居住がヴェルサイユに移ったこどで荒れ果てたルーブル宮殿が整備され、当時国王や王族のコレクションだった美術品を展示して一般市民にも解放し、芸術に触れる機会が増えたからだと言われています。 さらには、ナポレオン3世時代に設計士オスマンを中心にパリの再開発が行われたことも理由だと言われています。

インスピレーションが湧き出る!芸術的なフランス発のホームページ7選
open in a new window

Advanced Custom Fieldsの関連が便利すぎてヤバい

Date : 2017.05.22

WordPressのカスタムフィールドプラグインは沢山ありますが、当サイトではAdvanced Custom Fieldsをつかっています。フィールドタイプの「関連」機能が便利すぎるからです!

Advanced Custom Fieldsの関連が便利すぎてヤバい
open in a new window

クオリティーが凄い!最近話題になったウェブデザイン40個まとめ 2017年5月度

Date : 2017.05.18

さまざまな想いやメッセージを伝えるウェブサイトは、クリエイティブなアイデアの宝庫です。まるで思いつかないようなユニークなアイデアが使われていたり、最先端のウェブ技術を駆使したこれまでにない体験をお届けするサイトなど、参考したいポイントがたくさんあります。 この記事では、最近国内外で話題となった最新ウェブデザインをまとめてご紹介します。ますます加速するウェブの世界をのぞいてみてはいかがでしょう。

クオリティーが凄い!最近話題になったウェブデザイン40個まとめ 2017年5月度
open in a new window

会議室で誰よりも賢そうに振る舞うためのすごいトリック

Category : その他

Date : 2017.05.16

ゴールデンウィークも終わり、ようやく2017年も本番。ここからしばらく連休はないし、残念だが仕事をするしかない。仕事といえば会議。じつは会議さえ上手く乗り切れば仕事の評価は上がる。その点で、Googleの元マネージャー、サラ・クーパー氏が書いた『会議でスマートに見せる100の方法』は恐ろしいまでに実践的な指南書だ。ここから本当にいますぐ使えるアイデアをいくつか紹介する。

会議室で誰よりも賢そうに振る舞うためのすごいトリック
open in a new window

アクセシビリティ対応が捗る自動チェックツール「aXe」って知ってる?

Date : 2017.05.02

最近作成したWebサイトをデザインしたとき、特別なニーズや障害のある人にとってサイトがアクセシブルになるためにどのくらいの時間と労力を使いましたか。たぶん、多くの答えは「なにもしていない」だと思います。しかし、インターネットユーザーの中には、色を区別したり、テキストを読んだり、マウスを使ったり、あるいは、単にWebサイト構造が複雑でナビゲートするのに問題があるために、サイトのアクセスに苦労する人がたくさんいることを否定する人はいないと思います。

アクセシビリティ対応が捗る自動チェックツール「aXe」って知ってる?
open in a new window

アクセス解析では顧客は見えない?デジタル行動観察ツール「Usergram」がWebマーケティングを変える

Category : デザイン

Date : 2017.05.02

リアルな店舗とECサイトの1番の違いは「お客様の顔」が見えるかどうか。リアル店舗の接客のようなコミュニケーションをWebで再現するために、これまでに多くの手法が開発されてきました。

アクセス解析では顧客は見えない?デジタル行動観察ツール「Usergram」がWebマーケティングを変える
open in a new window

資生堂『花椿』がWebフォント『TypeSquare』を選んだワケ

Category : デザイン

Date : 2017.04.28

業界最大手のフォントメーカー「モリサワ」が提供しているwebフォント『TypeSquare(タイプスクウェア)』。無料配信フォントにはないバリエーション豊富なフォントが取り揃えられており、ウェブデザインに携わる者としてはぜひとも自身の製作物に取り入れて更なる幅をもたせていきたいと思わされるツールです。その一方、有料ツールということもあって、プレゼンテーションに取り入れてご提案しても、なかなか採用いただけないことが多々あります。

資生堂『花椿』がWebフォント『TypeSquare』を選んだワケ
open in a new window

Google Fontsの日本語フォント「Noto Fonts」の使い方

Date : 2017.04.27

このページではGoogle Fontsの中でも大注目の日本語フォント、Noto Fontsの使い方を解説します。 合わせて日本語のWebフォント使用上の注意点もまとめました。 Webフォントの仕組みについては「Web Fontの使い方とGoogle Fontsのオススメフォント 10選」でまとめました。「Web Fontって何?」方はざっと目を通しておいてください。

Google Fontsの日本語フォント「Noto Fonts」の使い方
open in a new window

CSSボタンを演出する155個のHoverエフェクトまとめ

Date : 2017.04.26

CSSのみでもボタンにおもしろい動きを演出することができるようになったのですね。数年前まではjQueryを使用しないといけなかったのが、CSSだけでエフェクトをつけられるのはとても効率的になりました。 そこで今回は、HTMLとCSSをコピペして演出できるHoverエフェクトを155個ご紹介します。あなたのWebサイトのデザインに合うものを見つけ出して、ぜひ実装してみてください。

CSSボタンを演出する155個のHoverエフェクトまとめ
open in a new window

HTML の 〜 内に書くタグの順番にも気を遣いましょう。

Date : 2017.04.25

今アナタがご覧になっている、このオンズのウェブサイトでは、読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は〜タグ内のコードにフォーカスして、弊社が実際に行っているHTMLマークアップの考え方を紹介していきます。 ブラウザで「要素を検証」して実際にコードを見てもらうのが手っ取り早いのですが、参考までに以下にコードをコピーして記載します。 今日(2016年1月20日)現在のオンズのウェブサイトの〜タグは次のように記載されています。

HTML の <head>〜</head> 内に書くタグの順番にも気を遣いましょう。
open in a new window

UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由

Category : デザイン

Date : 2017.04.24

初めまして。アメリカからやってきたUIデザイナーのCorey(コーリー)です。 LIGの転職サービス「Poole」でUIデザインをしています。 PhotoshopやIllustratorをメインとして使うデザイナーは多くいると思いますが、私はPhotoshopをほとんど使いません。1年前にSketchへ乗り換えたからです。 現在、日本のデザイン界ではSketchはそれほど使われてないかもしれませんが、海外ではSketchが大ブームになっています。 今回は私が最強なPhotoshopからSketchへ乗り換えた理由をお伝えします。

UIデザイナーの私がPhotoshopからSketchへ乗り換えた9つの理由
open in a new window

CSSアニメーションは確実に進化している!キーフレームを使ったCSSアニメーションの実装ポイントまとめ

Date : 2017.04.24

CSSアニメーションは確実に進化しています。 ユーザーを楽しませるだけでなく、ユーザーの注意をつかみ、サイトのゴールに導くための重要な手段にもなります。 単調なアニメーションではなく、キーフレームを使い、タイミング・ディレイ・反復・方向・「will-change」機能を使ったCSSアニメーションの実装のポイントを紹介します。

CSSアニメーションは確実に進化している!キーフレームを使ったCSSアニメーションの実装ポイントまとめ
open in a new window

当コンテンツは、ウェブにおける公共的な技術の向上を目的とし、著作権法第32条で定められた通り、一般に公表された著作物を出所を明示して引用しています。掲載に関するお問い合わせはこちらにご連絡ください。

Category

Page top