「手紙を書く」：良いメールを作るための3つのテクニック

膨大な数のトレーニング記事が手紙や郵送のレイアウトに当てられています。 そのような大量の情報に迷うのは非常に簡単ですが、それでも手紙を書いてニュースレターを書く必要があります。 そのため、今日では、初心者のタイプセッターに適した電子メールの効果的なレイアウトのための3つの一般的なテクニックを集めた資料を準備しました。

インタラクティブレター

インタラクティブな要素は単調なテキストを希釈し 、読者の時間を節約します。したがって、広告要素や美しくデザインされたテキストを作成するための便利なツールです。



例として、インタラクティブな画像を作成する簡単な方法を見てみましょう。 次の3つの手順で構成されます。



1. 1つのセルからテーブルを作成し、ページのロード直後に表示される背景画像を設定します。

<table cellpadding=0 cellspacing=0 border=0><tr> <td width=240 background="http://.../alternate-image.jpg"> </td></tr></table>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2.メインイメージをインストールし、img-swapクラスのリンクで「非表示」にします。 これにより、ホバー効果が作成されます。カーソルが背景画像の上にあるとき、その場所に主なものが表示されます。

 <table cellpadding=0 cellspacing=0 border=0><tr> <td width=240 background="http://../alternate-image.jpg"> <a class="img-swap" href="http://../link"><img src="http://../primary-image.jpg" width="240" height="170" border="0" style="display:block;" alt="the product"></a> </td></tr></table>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3.コマンドを設定します：ホバーし、img-swapクラスのスタイルを設定します。

 <style> .img-swap { display: block; width: 240px; height: 170px; } .img-swap:hover img { height: 0px; } </style>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

インタラクティブ画像を作成するためのこのオプションは、メール、Outlook、Yahoo！などのサービスでサポートされています。 およびGmail（ 変更あり ）。

プログレッシブエンハンスメント

プログレッシブ改善は、単純なものから複雑なものまで、Webページの段階的な調整を伴う戦略です。 最初に、文字の構造が示され、そのときだけ外観と使いやすさを改善するための作業が行われます。



最初に、HTMLを使用してレターのコンテンツをマークアップし、その構造を形成してレイアウトを構築します。 その後、CSSを使用してデザインをデバッグします。CSSスタイルのセットにより、ドキュメントのデザインと表示性が向上します。ここでは、背景画像の設定、フォントオプションの設定などを行います。 3番目のステップでは、CSS3仕様の新しい機能が適用されます。 コンテンツをマークアップして整理した後、JavaScriptがやってきて、インターフェースと動的要素とのやり取りを担当します。



1つの欠陥の出現がすべての作業の結果に影響を与える可能性があるため、ドキュメントの段階的な作業により、エラーを追跡してその場で修正することができます。 アクションの漸進的な改善を見たい場合は、htmlアカデミーの例に注意してください 。

メディアに関するお問い合わせ

メディアクエリメディアクエリは、さまざまなCSSスタイルのセットを選択できるCSS言語のコンポーネントです。 スタイルセットは、ドキュメントの魅力的な外観を作成するための鍵です（実際のCSSの動作例については、 こちらを参照してください ）。



メディアクエリには、ステップごとに設定される3つの順次コンポーネントが含まれます。

• メディアタイプ-ルールを適用するための環境を定義します。 all、print、screen（電子メールに使用）、スピーチなどのタイプを割り当てます
• 式は、たとえば、画面の幅と高さ、色などを記述するデバイスプロパティのリストです。
• スタイルルール-式のタイプとプロパティに一致する環境でレターを開くときに適用されます

モバイルデバイスでの文字の表示形式を最適化するには、メディアクエリが不可欠です。 固定デザインから「フローティング」デザインに切り替えることができます。このようなドキュメントは、さまざまなプラットフォームで適切に表示されます。



さらに、メディアクエリのテクノロジを使用して、サービス（指定された基準を満たすサービスを強調表示）をターゲットにし、それらに適応させることができます。 同様に、デバイスは、画面サイズを考慮することが重要な場所も対象にしています。 たとえば、iPhone 6 Plusの標準コードは次のようになります。

 @media screen and (max-device-width: 414px) and (max-device-height: 776px) { /* Insert styles here */
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

メディアクエリを使用すると、どのデバイスでも見栄えがよく、最も重要なレスポンシブレターを作成できますが 、多くの電子メールクライアントがこのテクノロジーをサポートしていないという事実に備える必要があります。



インタラクティブな文字、進歩的な改善、メディアクエリは、電子メッセージを小さな芸術作品に変えることができる非常に一般的な手法であり、さらに、レイアウトスキルをさらに発展させるための優れた基盤です。



Pechkin-mailブログでは他に何を書いていますか：

• メールマーケティング： 適切なプレーンテキストメールのレシピ
• 方法： インタラクティブレターガイド
• Pechkinメール「wiki」： メールニュースレターチェックリスト
• インターフェースとユーザビリティ： UXを設計する人と方法
• 「それについて話す」： デザイナーの仕事