タグ

2017年3月24日のブックマーク (3件)

  • 最近のWebを象徴するカード型コンポーネントをデザインする時のポイントまとめ

    ここ1, 2年で、カードのコンポーネントを採用しているWebサイトは非常に増えました。レスポンシブとも相性がよく、情報を分かりやすく整理でき、テキストや画像だけでなく、動画などのマルチメディアも要素として配置することができます。 プロのデザイナーが実践している、カードをデザインする時のポイントを紹介します。 Design Better Cards by Andrew Coyle 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カードのコンポーネントとは カードの形 カードの構成要素 カードをデザインする時の5つのポイント カードをデザインする時に参考になるリソース カードのコンポーネントとは カードは、より詳細な情報への入り口として機能するユーザーインターフェイスのコンポーネントです。さまざまな情報を管理することができ、ユーザー

    最近のWebを象徴するカード型コンポーネントをデザインする時のポイントまとめ
  • 斬新なのに効果的!最近流行している「非平行ヘッダー」の作り方

    ホームページの冒頭で、視線を引きつけて大きく印象づけるためにヒーローと呼ばれる画像とキャッチコピーを添えた見せ方をする部分があります。 通常、ヒーロー部分に限らず、多くの区切り目部分を平行に区切っていきますが、あえて四角形のように直線的に区切らずに、曲線や斜めの線などを使って区切っていくデザインが徐々に増え始めています。 今回は、最近よく見かける非平行ヘッダーの実装の仕方を、チュートリアル形式でご紹介します。 長方形で囲むヒーローヘッダーは比較的作りやすいのですが、非直線のヘッダーはどのようにして作られるのでしょうか。 作成手順を見てみましょう。 非平行ヘッダーとは? 非平行ヘッダー(Non-paralleled header) (非長方形ヘッダー(Non-rectangular header)とも言います)とは、その名の通り2つの平行線で囲まれていないヒーローヘッダーのことをいいます。

    斬新なのに効果的!最近流行している「非平行ヘッダー」の作り方
  • Google Analytics完全連携A/Bテストツール『Google Optimize 無償版』ついにリリース | Ledge.ai

    Google『お ま た せ』 ついに来ました。以前Ledgeでも紹介し、リリース予告だけで業界を激震させたABテストツール『Google Optimize』無償版公開です。(ベータ版だけど誰でも使える) とりあえずLedge編集部でソッコー触ってみたので、以下「何ができるのか?」と「どう活用するのか?」のまとめとなります。 できない事って逆に何?至れり尽くせりな無償開放 まずは気になる「何ができるんだっけ?」てとこですが、なんと『有料版とほぼ遜色なし』て感じでした。つまり、以前の記事でお知らせした以下の機能がほぼフル装備状態での無償開放になったようなんです。 ※作れるエクスペリエンス数に制限はあるけれど とりあえずできることリストGoogle Analyticsタグにちょっと加工してURL指定すればOK表示された画面をドラッグ&ドロップ、直接コード編集でいじってテスト作成変更履歴は全部残

    Google Analytics完全連携A/Bテストツール『Google Optimize 無償版』ついにリリース | Ledge.ai