デザインワークに使うツールといえば、Adobe社のPhotoshopやIllustratorが最も有名です。デザイナーの求人情報を見ると、募集要項に「PhotoshopやIllustratorの使用スキル」が必須の条件として記載されており、クリエイティブワークを行う上で必要不可欠なツールと言えます。

しかし近年、Webデザイナーの求人欄には「Figmaの開発経験者歓迎」など、Figmaを推奨する記述を見かけるようになり、業界の必須ツールも変わりつつあることが感じられます。Figmaと同様の機能や役割を持つツールとしてAdobeのXDもありましたが、2023年に単体での販売が終了したため、Figmaの存在感がますます強まっています。
  
## Figmaとは
  
FigmaはUIやUXデザインに適したプロトタイプデザインツールです。WebサイトやWebアプリを作成する際、ボタンを押したときの画面遷移やメニューの開閉など、複雑な動きが求められます。また、切り替え時のフェードインやアニメーションなども演出としてよく使用されます。

通常、こういったアクションを表現するにはプログラムを組む必要がありますが、Figmaではグラフィック作成の段階からこれらの動きを再現できます。さらに、データを共有する機能があるため、関係者と完成イメージを共有しやすいのも利点です。

Figmaはブラウザ上で動作するため、アプリのインストールが不要で、インターネットに接続されたパソコンさえあれば使用できます。このため、環境に依存せずデザイン作業を進められるというメリットもあります。

## 実際にFigmaを使ってみた感想


私は長年Webデザイナーとして、主にIllustratorでデザインし、写真や画像の加工はPhotoshopで行ってきました。Figmaには業務で触れたことがある程度だったため、今回はその違いを確認するために実際にFigmaを使用してみました。

全体的な使用感としては、ツールの配置が異なるため少し戸惑う部分もありましたが、Illustratorに近い印象でした。Illustratorが使える人であれば、比較的簡単に慣れるでしょう。しかし、いくつかIllustratorと明確に異なる点がありましたので、挙げていきます。

### デフォルトで紙媒体を作成する機能が無い

FigmaはWebサイトやアプリなどのデジタルメディアのコンテンツをデザインするためのツールであるため、印刷物を作る機能がありません。そのため、紙媒体のデザインをする場合、フレーム（アートボード）のサイズを紙の規格のサイズで指定する、余白設定やトンボ（裁断時の目印）の設定をデザイナーが意図的に追加する手間が生じます。

ただし、プラグインを利用することで、紙媒体の設定も可能なようです。しかし、色指定に関しては、CMYKモードをIllustratorほど詳細には設定できません。そのため高品質が求められる場合はIllustratorのほうが適しています。Figmaはインターネット接続が可能であればどのパソコンでも編集が可能なため、頻繁にテキストを編集し、そこまで高品質が要求されない場合の物はFigmaの方が便利です。

### パスファインダー機能について

パスファインダーとは、複数の図形を組み合わせたり、重なり部分を切り抜いたりする機能で、デザイン作成によく使用されます。
結論から言うと、収納されている場所が違うだけでIllustratorと、ほぼ同じことができます。

 ![](https://cont.sterfield.co.jp/uploads/img_A_1_1378b85707.png) 

しかし、Illustratoreのパスファインダーにある「分割」に相当する機能がありません。

 ![](https://cont.sterfield.co.jp/uploads/img_A_2_45184b55ef.png) 

そのため、図形を複数のオブジェクトとして使いたい場合は、コピーを用意してそれぞれ切り抜きの設定を変えて作成する必要があり、少し手間がかかります。


### ペンツールでのパス描画

IllustratorやFigmaは基本的にベジェ曲線を制御して図形を描きます。そこでペンツールを使って図形を描くことを試してみました。 今回はフリー素材のサクランボのイラストを下絵にしてペンツールで描いてみました。

先ずはillutratorで描きます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_1_0c343f8462.png) 

ペンツールで先ずは始点となる頂点を選択しクリックし、ドラックをすると線が曲線になります。そして次の頂点を選択して下絵の輪郭をなぞります。
このようにして3つの図形を描きます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_2_873e4b36c9.png) 

茎の部分は緑色を指定して、実の部分にグラデーションを指定して色付けすます。最後に白い光沢描いて仕上げます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_3_bf1463921d.png) 

同様の作業をFigmaでも試してみました。

ペンツールが収納されている位置は違いますが、Illustratorで行う作業と同じで特に違和感なく作業ができます。しかし、2つ目のオブジェクトを描いた時点でIllustratorとの違いに気が付きました。

 ![](https://cont.sterfield.co.jp/uploads/img_B_4_3ad2f76b6c.png) 

普通に描いていたのですが、この時点で2つのパスで1つのオブジェクトになる扱いでIllsutratorで言うところの複合パスになっていました。そのためこの状態でグラデーションを設定すると、オブジェクト全体にグラデーションが描画されてしまいます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_5_c1a0890346.png) 


どうやら、ペンツールを使用する場合、 ペンツールアイコンの上に表示される×のアイコンをクリックしない限り、描いた物は1つのオブジェクトとして扱われるようです。

 ![](https://cont.sterfield.co.jp/uploads/img_B_6_bf0edd4ef9.png) 


また、一度描いた図形を編集したい場合、Illsutratorなら頂点を選択すれば編集できましたが、Figmaの場合、描いたオブジェクトを選択してエンターキーを押して 編集モードにしてから編集するようです。
 ![](https://cont.sterfield.co.jp/uploads/img_B_7_ce745450f3.png) 


これらのことを知らないと、意図しない複合パスができてしまったり、編集したくてもできないという事態になりかねません。  
  
また、Illustratorと違い、1つの頂点を起点にして複数の線を描いて枝分かれすることもできます。これを利用して矢印の形も描くことができます。
 ![](https://cont.sterfield.co.jp/uploads/img_B_8_3e8d5b59cc.png) 




### テキストの変形について

 ![](https://cont.sterfield.co.jp/uploads/img_C_1_8219f2283f.png) 

デザインをしていく上で、時にはテキストを変形してグラフィカルに見せることもあります。
このようなときはIllustratorの場合、先ずは普通にテキストを入力しは標準に備わっているワープツールを使うケースが多いです。

今回はワープツールの円弧を使って下方向に湾曲するテキストのサンプルを作ってみました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_2_08a797d87f.png) 

これと同じことがFigmaでできるか試してみました。

先ずはIllustratorと同じようにテキストを入力します。このときに気が付いたのですが、Figmaはパソコンにインストールされているフォントではなく、
googleフォントなど、オンライン環境で使用できるフォントデータを読み込んでいるようです。このような点もIllustratorとの違いを実感しました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_3_e396dbcb00.png) 

ただ、ワープツールに相当する物はFigmaの標準の機能ではないようです。調べてみるとプラグインで提供されており、プラグインで変形できるみたいなので実際に使ってみました。

今回は「Warp IT」というプラグインを使用してみました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_4_cf64d3c0cd.png) 


テキストを選択してプラグインを起動すると図のように編集画面が出ますこの画面で頂点を編集して、「APPLY RESULTS」ボタンを押すと編集した通りに形ができます。

 ![](https://cont.sterfield.co.jp/uploads/img_C_5_1a01f2c368.png) 

編集の仕方はIllustratorと違いますが、それでも問題なく加工ができそうです。しかし、作成してから気が付きましたが、作成した物はテキストデータ
ではなく、パスデータに変わっていました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_6_d708119777.png) 

この点、Illustratorはテキストデータの形を保持しているので別の文字に変える編集も可能です。なので、更新の可能性が高い物はIllustratorで作成した方がよいと思います。

 ![](https://cont.sterfield.co.jp/uploads/img_C_7_ec1e911ba1.png) 


## まとめ

Figmaを使用してみて、Illustratorでできることは概ねFigmaでも可能だと感じました。また、Figmaはインターネット環境があればどのパソコンでも使える手軽さがあり、導入コストが低いのも魅力です。  
  
ただし、IllustratorにはIllustratorの利点もあり、どちらか一方に代替されるのではなく、用途によって棲み分けられていく印象でした。  
  
今後のWeb業界でのツールの主な使い分けとしては、  
  
画面デザインはFigma  
写真加工はPhotoshop  
ロゴなど精密なデザインはIllustrator  
  
といった形になるのではないでしょうか。時代の変化に応じて、新しいツールも柔軟に取り入れていきます。


medium_25307319_m.jpg

small_25307319_m.jpg

thumbnail_25307319_m.jpg

25307319_m.jpg

Figmaが注目される理由とは？WEBデザイナーが使ってみた感想

近年、生成AIの技術は急速に進化し、様々な業務に活用されています。これはITの開発現場でも同様で生成AIにプログラムを書いてもらい、業務の効率化に繋げる動きがあります。
  
生成AIと言えば、ChatGPTを使用する話しはよく聞きますが、同じくよく話題に上がる生成AIとして、Claude AIの名前もよく聞きます。Claude AIは、一度に扱える文字数も多い話を聞き、WEBページ全体などの文字数が多いコンテンツも作成できるか、また精度はどの程度なのか実験しました。  
  
Claude AI  
https://claude.ai/new  
  
参考：  
https://mijinko.co.jp/media/chatgpt-claude-difference/

## Claude AIとは  
  
Claude AIは、Anthropic（アンソロピック）というAI研究団体によって開発されました。こちらは、ChatGPT で有名なOpenAI社に所属していた元社員が2021年に立ち上げた企業です。同社のやり方に異を唱え、退社後に設立しました。倫理的なAI開発に強いこだわりを持ち、ユーザーの意図を深く理解し、安全で信頼性の高い対話を提供することを目指しています。

回答内容も、ユーザーの意図をより正確に理解し、適切な応答を生成するために設計されています。  
  
## 実験内容

Claude AIの能力を検証するために、弊社で運営するコンペナビのLP「自治体向け動画コンテスト主催サポート」を最近のトレンドであるBENTO UIの形にする実験をしました。  
  
コンペナビ:  
https://compe.sterfield.jp  
  
コンペナビLP:自治体向け動画コンテスト主催サポート  
https://compe.sterfield.jp/lp_jichitai  
  
また、弊社開発のWEBサイトなので、詳細なデータは手元にありますが、一般の視聴者と同じように通常の閲覧、および右クリックの「ソースの表示」だけで得られる情報のみを使用しました。これは技術者抜きでどんな物が作れるのか試したかったからです。

### 実験1：URLを使ってコーディング依頼
  
先ず、はじめにURLを指定して作る事を試してみました。  
  
「（コンペナビLPのURLを記載）のページをBENTO UIに作り変えてください。そのためのコードを書いてください。」
と依頼してみました。すると、返答の返答がありました。 

> 申し訳ありませんが、私はURLを開いたりウェブページの内容を直接確認したりすることはできません。そのため、指定されたページの具体的な内容を見ることができず、正確なBENTO UIへの変換を行うことは難しいです。  
> しかし、BENTO UIの一般的な構造に基づいて、自治体向けのランディングページをイメージしたBENTO UIのテンプレートを提案することはできます。以下に、そのためのHTMLとCSSのコードを示します。  
  
この返答から、Claude AIは直接URLを開くことができず、具体的にページ内容を確認できないことが分かりました。そして実際に生成されたコードをブラウザでレンダリングしてみたら、以下のようになりました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_1_ca709c375b.png) 

生成されたコードは、BENTO UIの基本構造を備えており、また、設定されているMETA情報を理解している様でした。

### 実験2：HTMLファイルを使ったコーディング依頼

Claude AIはChatGPT と違い、こちらがアップロードしたファイルに応じて返答を求めることができます。なので、コンペナビのLPで右クリックして「ソースの表示」でLPのHTMLをコピーしてHTMLファイルを作成しました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_2_7ad24841f0.png) 

そして、このHTMLファイルをアップロードし、「今 pasteしたHTMLをBENTO UIに変えてください。なるべく元のデザインの要素 色合いを取り入れてBENTO UIにしてほしい」と指示を出しました。  
  
すると以下のページを作ってくれました。  
 
 ![](https://cont.sterfield.co.jp/uploads/img_202450830_2_2_7ba57ca19f.png) 
    
HTMLファイルを元に、より具体的なレイアウトを作成してくれました。もちろん細部の作りこみは必要になりますが、元のデザインの要素をしっかり認識した上で作成されているのが十分に分かります。  
  
### 実験3：詳細な修正指示を出してみる  
  
さらに、以下の修正指示を出してみました。  
  
>・元のサイトはスクロールするとMOVIEなど動くテキストがありますが、これらも再現してください。  
  
>・コンテスト事例紹介は各企業のロゴがスクロールする構造です。ロゴ（画像）の代わりに、100pxの赤いdivをいくつか用意してスクロールする構造にしてください。  
  
>・ヘッダーのメニューの項目はハンバーガーアイコン（3本の線のアイコン）を押すと表示・非表示に切り替える構造にしてください。
  
と3点の修正指示をしてみました。  
すると以下のページが生成されました。  

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_3_adc40b1594.png)   
  
静止画なので分かりにくいですが、今回はHTML、CSSだけでなくJavaScriptも生成され、実際にスクロールに応じてテキストが動いて出現するなどのアクションも再現されました。ただ、残念ながらスクロールについては意図した通りに作成されませんでした。
  
また、驚いたことにスマホのレイアウトになった際のハンバーアイコン(メニューの収納)の仕掛けも作成してくれました。  
  
 ![](https://cont.sterfield.co.jp/uploads/img3_2_d3744cd143.png) 
  
### 実験4：画像を指定して配置してみる  
  
次に元のサイトから使用している画像を抜き出して、実際に配置できるか試してみました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_4_685f06a92d.png) 

HTMLと同様に画像をアップロードして、  
  
> 今！自治体による動画コンテストが人気！の箇所で    
> - １募集で、 s1_1.png  
> - ２撮影＆投稿で s1_2.png  
> - ３受賞で s1_3.png  
>
> の画像を入れてください。  
  
と指示してみました。すると、  
  
改善コードが生成されました。
  
 ![](https://cont.sterfield.co.jp/uploads/img_202450830_4_2_de3c195a71.png) 
  
また、コードの生成と合わせてサイズを調整する方法も教えてくれました。もっと細かく指示してクオリティを上げることもできそうです。

## まとめ
Claude AIは無料プランでは1日に対話できる回数が少なく、上記の作業も数日間を要しました。そのため本格的に業務に使うとなると有料プランに入る必要があると感じました。しかし、この欠点を除けばかなり便利なツールだと思います。単純に制作のスピードが上がりそうですが、技術者が不在でもかなり精度の高い物が作れそうです。  
  
生成AIの登場により、エンジニア、非エンジニアの垣根がなくなりつつあり、AIを使う頻度はこれから一層増すでしょう。最近では「プロンプトエンジニア」という言葉まで聞くようになりました。  
これからの時代、AIを使いこなす技術も必須のスキルと言えそうなので学んでいきます。

medium_img_202450830__title.png

small_img_202450830__title.png

thumbnail_img_202450830__title.png

img_202450830__title.png

Claude AIを使ったBENTO UI変換実験レポート：非技術者もWEBページを作れる時代になるのか検証してみた

「WEBデザイントレンド　2024」　このようなキーワードで検索をすると、「2024年のWEBデザイントレンド●●選」  
などのよう記事が多く見受けられまます。これらの記事でトレンドであるテーマと実際のWEBサイトが紹介されています。  

また、記事をいくつか読んでいると、多くの記事で取り上げられるテーマがあることに気が付きます。私の主観になりますが、その観点から気になったWEBサイトをピックアップし、それぞれのトレンドについて考察してみました。  

## WEBクセシビリティ  

簡単にWEBアクセシビリティとは障害者差別解消法の一環として求められる対応で、障害の有無に関わらず全ての人が利用しやすい環境を目指すことが求められます。市役所などの公的機関については既に施行されていましたが、2024年4月よりその対象が拡大され、民間の事業者も対応が努力義務が求められるようになりました。  
  
我々WEB業界も例外ではなく、今後は「使いやすさ」と「美しさ」を追求したデザインが求められます。具体的に配慮すべき点についてはデジタル庁などでも紹介されていますのでご参照ください。  
  
デジタル庁　WEBアクセシビリティ導入ガイドブック  
https://www.gov-online.go.jp/useful/article/202310/2.html#c1
  
  

### 味の素株式会社  

 ![](https://cont.sterfield.co.jp/uploads/240531_img01_863d672458.png) 
https://www.ajinomoto.co.jp/  
  
キーカーラの赤をメインに白とのコントラストが効いた見やすいデザインです。記事のリンクなども大きめに作られており、分かりやすく使いやすい構成となっています。  
  
また、WEBアクセシビリティの観点から配慮すべきこととして指摘されている事について、「音声の自動再生をさせない」、「自動でコンテンツの切り替えを行わない」などが配慮が必要とされています。  
この点、動画やスライダーには分かりやすいミュートボタンや停止ボタンも設置されており、このような点もWEBアクセシビリティへの対応が伺えます。
  
  
### ANAホールディングス株式会社
 ![](https://cont.sterfield.co.jp/uploads/240531_img02_d93892d3e3.png) 
https://www.ana.co.jp/ja/jp/  
  
こちらも白とのコントラストが効いた見やすいデザインとなっております。また膨大なリンクもメニューアイコン内にまとめられており、整理された構造となっております。  
  
こちらでWEBアクセシビリティに配慮していると感じるところはボタンのテキストが「検索する」「●●を探す」など、動作を指す言葉を含めてボタンにしている点です。これは、視覚障害がある方はテキストの読み上げ機能を使ってWEBサイトを利用することから、必要な配慮が必要な点として上げられています。  
  
## Y2Kスタイル（デザイン）

Y2Kとはファッション業界から生まれた言葉で、 Year 2Kilo（1000）つまり、2000年のことを指します。90年代後半から2000年代初頭の流行の要素を取り入れた新たなレトロスタイルです。  
特長としては、明るく派手なネオンカラーや、メタリックカラーを多用としたデザインが多く見受けられます。また、当時はデジタルアートが広がり始めた頃でしたが今よりもマシン性能が劣るため、デジタルアート全般が粗目のドット絵で表現されてしまいます。しかしそれが現代の若者には新鮮に映るようで、このようなデジタルアートも特長の一つとされています。  
  
こういった要素を取り入れたWEBデザインもトレンドとなっているようです。  
  
### 株式会社スーパースーパー
 ![](https://cont.sterfield.co.jp/uploads/240531_img03_6295a51d89.png) 
https://supersuper.jp/  
  
アクセスすると大胆なアニメーションがあり、すぐに引き込まれます。  
カーソルに丸いアイコンが付いてきたり、しかもマウスを動かすと楕円形に変化したりなど細部もこだわっています。2000年代というと技術力の高さを競うように動的な仕掛け多く入れる風潮がありましたが、それを現代の環境で実践しているような印象を受けました。  
  
全体的にごちゃごちゃした印象ですが、マウスオーバーのアクションを大きくするなどの工夫があり使いやすさの対策もしっかりしています。
  
## Y3Kスタイル（SFデザイン）  

こちらは3000年という意味で、Y2Kを経て生まれたスタイルです。Y2Kはレトロなイメージに対して、Y3Kは未来志向です。つまり、サイバーやSFを彷彿とするデザインを指します。
WEBデザインで言えばメタバースやAIなどの影響を受けた近未来的なデザイン特長としては、3Dアニメーションを取り入れたデザインが多いです。  
  
技術力の高さという意味でY2Kと通じる点もありますが、Y2Kはどちらかというと、エネルギッシュな力強い印象を受けますが、Y3Kはスッキリしたスタイリッシュな印象を受けます。  
  
### SYNCRELY STUDIO  
 ![](https://cont.sterfield.co.jp/uploads/240531_img04_1256aaeb62.png) 
https://www.syncrely.com/   
  
メタリックな3Dアニメーションが印象的で引き込まれます。これだけで革新的なことをしているWEBサイトのように見えますが、よく見てみるとスクロールで反応して文字が出るなど定番の動きしかしていません。重要なグラフィック要素を効果的に見せていることがよくわかります。
  
## モバイル特化型サイト  

統一された名称が無かったので、このような見出しでまとめましたが、スマホサイトの構造をそのままパソコンで使用するデザインも増えてきました。具体的にはパソコンで見たときは、メインコンテンツを画面中央に配置し、パソコンならではの大きな画面は主に装飾に使う構造で制作しています。近年ではスマホでホームページを見る機会の方が圧倒的に多く特に、BtoCのサービスではトレンドの一つとなっています。
  
### サントリー ほろよい  

 ![](https://cont.sterfield.co.jp/uploads/240531_img05_1258add9ee.png) 
https://www.suntory.co.jp/rtd/horoyoi/  
  
メインコンテンツは完全にスマホサイトと同じ構成で作りパソコンでは大きな余白はパッケージを描きブランドイメージをより印象つけています。制作面を考慮すると、工数を減らし効率化できそうです。
  
### ネオ居酒屋  
 ![](https://cont.sterfield.co.jp/uploads/240531_img06_e7061dbf7d.png) 
https://www.dot-st.com/nikoand/cp/neoizakaya
  
こちらも同じくメインコンテンツは完全にスマホサイトと同じ構成です。パソコンでは大きな余白にボタンを設置することでアクセシビリティを高めています。
  
## Bento UI  

グリッド状にコンテンツをレイアウトし、情報を分かりやすく整理したデザインです。まるでお弁当箱におかずを詰めるように見えることから名づけられました。この構造のメリットはパソコンの大画面でも見やすく、スマホで見る場合はカラム落ちさせるだけで対応できるのでパソコンでもスマホでも無理なく表現できます。
  
### ニコアンド（niko and…）  
 ![](https://cont.sterfield.co.jp/uploads/240531_img07_1589d693e4.png) 
https://www.nikoand.jp/
  
ポップな見た目と多い情報量、そして、アニメーションと多くの要素があるのに、ごちゃごちゃした印象もなくむしろスッキリした印象です。UIの特性をうまくいかした好例なのでしょう。  
  
### アーク ペーパードライバースクール
 ![](https://cont.sterfield.co.jp/uploads/240531_img08_3ed94d60ec.png) 
https://arc-pds.com/
  
こちらもUIの特性を上手く活用し情報をスッキリ見せることに成功しています。Bento UIはパソコン、スマホもどちらにも適した構造と言えそうです。
  
## まとめ
今回WEBデザインのトレンドを調査していい刺激になりました。普段の業務では技術の向上に目が行きがちですが、こうしてトレンドを調査するといいアイディアが浮かびます。
これからも技術向上と並行して、新しいデザインを取り入れることでより魅力的で使いやすいWEBサイトを提供できるよう努めていきます。


#### 参考記事
  
ミニナレ WEB制作会社シスコム：  
https://www.gohp.jp/blog/design/3952/  
  
株式会社ルート・シー:  
https://www.root-sea.co.jp/blog/knowhow/trend-design2024-1/  
  
WEBブランディングの株式会社フィールビー:  
https://feelbee.jp/news/news_branding/3664  


large_28964162_m.jpg

medium_28964162_m.jpg

small_28964162_m.jpg

thumbnail_28964162_m.jpg

28964162_m.jpg

WEBデザインのトレンド調査

<p>最近、WEBページのデザインで、ページを構成するパーツから先にデザインを始める必要のある案件に初めて携わったのですが、<br />
これまでページ全体のレイアウト→各セクションのレイアウト→各部品のレイアウトというふうに、どちらかというと大きなところからデザインを進める方法をとっていたため、<br />
若干戸惑ってしまいました。</p>
<p>しかし、レスポンシブデザインでは、PC、タブレット、スマホでそれぞれ適したページレイアウトが異なっており、ページのレイアウトからデザインを進める方法が適さない場合が少なくありません。<br />
そんな中、最近ではパーツやそれらの集まりであるコンポーネントからデザインし、それらを組み合わせてページを作っていく方法が広がりつつあります。</p>
<p>そこでパーツからデザインする方法を調べたところ、アトミックデザインという方法に行き着きました。<br />
アトミックデザインとは、部品の最小単位を原子（Atom）と位置づけ、<br />
原子（Atoms; 部品の最小単位）<br />
→ 分子（Molecules; 2個以上の最小単位の組み合わせ）<br />
→ 有機体（Organisms; 機能を成す分子の集まり）<br />
→ テンプレート（Templates; ページのレイアウト）<br />
→ ページ(Pages; 実際の内容をテンプレートに組み込んだもの)<br />
という様に、細部からより大きな単位へとデザインしていく方法です（参考: <a href="http://atomicdesign.bradfrost.com/chapter-2/" target="_blank" rel="noopener">Atomic Design Methodology | Atomic Design by Brad Frost</a>）。</p>
<p>アトミックデザインの方法を使うことで、効率の高い自由度の高いデザインが可能となります。<br />
アトミックデザインでは独立した機能を持ったパーツを単位としてデザインするため、レイアウトの変更や変化によって機能が失われることがありません。そのため、必要に応じて自由にレイアウトすることが可能です。<br />
デバイスごとにレイアウト変更が必要なレスポンシブデザインには最適です。</p>
<p>さて、WEBページのデザインをするためのアプリとして、最近私はAdobeのXDをよく使います。<br />
日々アップデートされ、段々と使いやすくなっているのを感じます。</p>
<p>ただ、XDを使ってアトミックデザインをやってみようとしたときに、問題にぶつかりました。<br />
XDで部品を組み合わせる場合、シンボルという機能を使って実現することになります。<br />
このシンボルは、再利用する部品をプロジェクトのアセットとしてストックしていく仕組みです。<br />
XDではシンボルをシンボルで構成するような入れ子の構造も可能なので、アトミックデザインも可能かと思われたのですが、シンボルではテキストとビットマップ形式の画像以外はパーツの差し替えができないため、アトミックデザインの利点を活かしきることができません。</p>
<p>2019.06.11追記）<a href="https://launchcart.jp/blog/adobe-xd%E3%81%8C%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AB%E5%AF%BE%E5%BF%9C%EF%BC%81%E3%82%A2%E3%83%88%E3%83%9F%E3%83%83%E3%82%AF%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/" target="_blank" rel="noopener">XDにコンポーネントが導入されました！</a></p>
<div class="lcLink js-loadLcLink" data-lclink="https://launchcart.jp/blog/adobe-xd%e3%81%8c%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%81%ab%e5%af%be%e5%bf%9c%ef%bc%81%e3%82%a2%e3%83%88%e3%83%9f%e3%83%83%e3%82%af%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/"><a href="https://launchcart.jp/blog/adobe-xd%e3%81%8c%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%81%ab%e5%af%be%e5%bf%9c%ef%bc%81%e3%82%a2%e3%83%88%e3%83%9f%e3%83%83%e3%82%af%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/" target="_blank">記事へのリンク</a></div>
<p>&nbsp;</p>
<div id="attachment_14396" style="width: 650px" class="wp-caption alignnone"><a href="/uploads-archive/2018/11/Nov-13-2018-16-40-33.gif"><img aria-describedby="caption-attachment-14396" decoding="async" loading="lazy" class="size-full wp-image-14396" src="/uploads-archive/2018/11/Nov-13-2018-16-40-33.gif" alt="" width="640" height="448" /></a><p id="caption-attachment-14396" class="wp-caption-text">XDではアイテムごとにアイコンを変更したい場合、シンボルから解除した上で、アイコンを差し替える必要があるので、レイアウトを変更するときに別々の変更が必要になる</p></div>
<p>一方、XDと同じくUI/UXデザインツールとして人気のSketchでは、パースそれぞれの中で、パーツを差し替えることも可能なので、アトミックデザインに最適だと言われています。<br />
しかし、Sketchは年間$99の支払いが必要で、Windows環境に対応しておらず、プロトタイプの共有はまた別途in visionの契約が必要になるため、導入のハードルが少し高いと感じていました。</p>
<p>そこで別のアプリを探してみたところ、<a href="https://www.figma.com" target="_blank" rel="noopener">Figma</a>というUI/UXデザインツールがとても優れているという<a href="https://note.mu/gimmickdock/n/nb304dee6bd51" target="_blank" rel="noopener">記事</a>を見つけました。</p>
<p>Figmaはブラウザで動作するため、Mac、Windowsを問いません。<br />
実際使ってみると、ブラウザで動作するアプリにもかかわらず、ネイティブアプリを操作しているかのような快適な操作感で、とても使いやす印象でした。</p>
<p>更に、Sketchと同じように、XDのシンボルに当たるパーツの管理機能は、マスターコンポーネント→インスタンスという形式をとっているので、同じパーツであっても、それぞれで違うパーツへ差し替えることが可能で、アトミックデザインを行う上で優れていることがわかりました。</p>
<div id="attachment_14411" style="width: 650px" class="wp-caption alignnone"><a href="/uploads-archive/2018/11/Nov-13-2018-17-22-48.gif"><img aria-describedby="caption-attachment-14411" decoding="async" loading="lazy" class="size-full wp-image-14411" src="/uploads-archive/2018/11/Nov-13-2018-17-22-48.gif" alt="" width="640" height="405" /></a><p id="caption-attachment-14411" class="wp-caption-text">Figmaでは同じパーツ（コンポーネント）の中のパーツをそれぞれ差し替え可能</p></div>
<p>3プロジェクトまで無料で利用できますので、まずはFigmaでアトミックデザインを覚え、なれてきたらSketchというのも方法としてはありかもしれません。</p>
<p>また、Figmaは30日間分のバージョン管理も可能。<br />
Sketchと違い、単独でプロトタイプの共有が可能なのも魅力です。<br />
また、無料版では2人まで、月$12の有料版では人数無制限の同時編集も可能で、<br />
チームでデザインを行う場合には、Sketchよりも優れたツールだと感じました。</p>
<p>&nbsp;</p>
<h3>参考にさせていただいたサイト</h3>
<p><a href="http://atomicdesign.bradfrost.com/chapter-2/" target="_blank" rel="noopener">Atomic Design Methodology | Atomic Design by Brad Frost</a></p>
<p><a href="https://goworkship.com/magazine/atomic_design/" target="_blank" rel="noopener">アトミックデザインとは？ コンポーネント単位で創るUIデザイン手法 | Workship MAGAZINE(ワークシップマガジン)</a></p>
<p><a href="https://www.webcreatorbox.com/inspiration/component-design" target="_blank" rel="noopener">これからのWebデザインは、コンポーネント化を意識しよう | Webクリエイターボックス</a></p>
<p><a href="https://note.mu/gimmickdock/n/nb304dee6bd51" target="_blank" rel="noopener">一人で「UIデザインツールどれがいいのか論争」をしてみる｜ノムラギミック｜note</a></p>


XD使いがアトミックデザインを始めるならUI/UXデザインアプリのFigmaがよさそう

<p>Adobe の XD は、WEB サイトやアプリのデザインを制作するツールとしてとても使いやすく、プロトタイプツールとして、お客さんとの情報共有のツールとしても利用できるため、最近使う機会がとても増えてきました。</p>
<p>XD ではプロトタイプとしてページの遷移を再現することはできますが、アニメーションを付けるところまではできません。<br />
最近の WEB デザインの傾向として、アニメーションが印象に占める割合が大きくなってきているため、コーディングに入る前にアニメーションをお客さんに確認いただきたい機会が増えてきているため、そのあたり何とかできないものかと思うようになっていました。</p>
<p>XD でデザインを作って、アニメーションをつけたい。それを実現してくれるのが、<br />
「Kite Compositor」です。</p>
<p><a class="link" href="https://kiteapp.co/" target="_blank" rel="noopener">公式ホームページ: Kite Compositor – Motion Design for Mac</a></p>
<p>$99 で購入する必要がありますが、20日間、無料で体験利用することができます。</p>
<h2>Kite で XD データからアニメーションを作る方法</h2>
<ol>
<li>XD データをインポートする</li>
<li>データを整える</li>
<li>アニメーションの設定</li>
<li>アクションの設定</li>
<li>テスト &amp; 動画の録画・出力</li>
</ol>
<h3>1. XD データをインポートする</h3>
<p><a href="/uploads-archive/2018/06/ss_xd_01.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-14029 size-medium" src="/uploads-archive/2018/06/ss_xd_01-300x182.jpg" alt="" width="300" height="182" srcset="/uploads-archive/2018/06/ss_xd_01-300x182.jpg 300w, /uploads-archive/2018/06/ss_xd_01-768x467.jpg 768w, /uploads-archive/2018/06/ss_xd_01-1024x622.jpg 1024w, /uploads-archive/2018/06/ss_xd_01-228x139.jpg 228w, /uploads-archive/2018/06/ss_xd_01.jpg 1282w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>XD でデザインデータを作成します</p>
<p><a href="/uploads-archive/2018/06/ss_kite_01.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-14017 size-medium" src="/uploads-archive/2018/06/ss_kite_01-300x187.jpg" alt="" width="300" height="187" srcset="/uploads-archive/2018/06/ss_kite_01-300x187.jpg 300w, /uploads-archive/2018/06/ss_kite_01-228x142.jpg 228w, /uploads-archive/2018/06/ss_kite_01.jpg 737w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>Kite で新規ドキュメントを作成し、</p>
<p><a href="/uploads-archive/2018/06/ss_kite_02.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14019" src="/uploads-archive/2018/06/ss_kite_02-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_02-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_02-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_02-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_02-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_02.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>XD で対象ファイルを開いた状態で、 File &gt; Import &gt; From Adobe XD CC を選択</p>
<p><a href="/uploads-archive/2018/06/ss_kite_02-2.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14018" src="/uploads-archive/2018/06/ss_kite_02-2-300x178.jpg" alt="" width="300" height="178" srcset="/uploads-archive/2018/06/ss_kite_02-2-300x178.jpg 300w, /uploads-archive/2018/06/ss_kite_02-2-768x456.jpg 768w, /uploads-archive/2018/06/ss_kite_02-2-1024x608.jpg 1024w, /uploads-archive/2018/06/ss_kite_02-2-228x135.jpg 228w, /uploads-archive/2018/06/ss_kite_02-2.jpg 1231w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>変換方法を設定してインポートします。</p>
<h3>2. データを整える</h3>
<p><a href="/uploads-archive/2018/06/ss_kite_03.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14020" src="/uploads-archive/2018/06/ss_kite_03-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_03-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_03-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_03-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_03-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_03.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>インポートしたままだと、クリッピングマスクを掛けていた場合に、マスクが外れてしまうことがあるなど、崩れることがあるので、調整します。</p>
<h3>3. アニメーションの設定</h3>
<p><a href="/uploads-archive/2018/06/ss_kite_04.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14024" src="/uploads-archive/2018/06/ss_kite_04-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_04-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_04-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_04-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_04-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_04.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>アニメーションを設定したい要素があるレイヤーを選択し、<br />
Add Child &gt; Basic Animation でレイヤーにアニメーションを追加します。</p>
<p><a href="/uploads-archive/2018/06/ss_kite_04-2.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14021" src="/uploads-archive/2018/06/ss_kite_04-2-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_04-2-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_04-2-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_04-2-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_04-2-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_04-2.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>transformなど、アニメーションの種類を選択します。</p>
<p><a href="/uploads-archive/2018/06/ss_kite_04-3.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14022" src="/uploads-archive/2018/06/ss_kite_04-3-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_04-3-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_04-3-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_04-3-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_04-3-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_04-3.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>アニメーション後の値を設定します。<br />
アニメーション名は、あとで確認しやすいものに変更しておきます。</p>
<p><a href="/uploads-archive/2018/06/ss_kite_04-4.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14023" src="/uploads-archive/2018/06/ss_kite_04-4-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_04-4-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_04-4-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_04-4-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_04-4-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_04-4.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>タイムラインの時間をスライドさせると、アニメーションの状態を確認できます。</p>
<h3>4. アクションの設定</h3>
<p><a href="/uploads-archive/2018/06/ss_kite_05.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14027" src="/uploads-archive/2018/06/ss_kite_05-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_05-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_05-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_05-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_05-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_05.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>クリックなど、アニメーションに紐づけたいアクションをつけたい要素のレイヤーに、<br />
Add Child &gt; Action でアクションを追加します。</p>
<p><a href="/uploads-archive/2018/06/ss_kite_05-2.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14025" src="/uploads-archive/2018/06/ss_kite_05-2-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_05-2-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_05-2-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_05-2-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_05-2-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_05-2.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>まず１つ目、Event Type で「No Event」を選択し、先程作成したアニメーションを選択します。</p>
<p><a href="/uploads-archive/2018/06/ss_kite_05-3.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14026" src="/uploads-archive/2018/06/ss_kite_05-3-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_05-3-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_05-3-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_05-3-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_05-3-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_05-3.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>2つ目のアクションを追加し、Event Type で「Mouse Clicked」を選択し、<br />
Action Type で Trigger Actions を選択し、<br />
「+」ボタンで１つ目で設定したアクションを追加します。</p>
<h3>5. テスト &amp; 動画の録画・出力</h3>
<p><a href="/uploads-archive/2018/06/ss_kite_06.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-14028" src="/uploads-archive/2018/06/ss_kite_06-300x188.jpg" alt="" width="300" height="188" srcset="/uploads-archive/2018/06/ss_kite_06-300x188.jpg 300w, /uploads-archive/2018/06/ss_kite_06-768x480.jpg 768w, /uploads-archive/2018/06/ss_kite_06-1024x640.jpg 1024w, /uploads-archive/2018/06/ss_kite_06-228x143.jpg 228w, /uploads-archive/2018/06/ss_kite_06.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>ウィンドウの上にある 動画ウィンドウアイコンの「Present」ボタンで実際の動作を確認できます。</p>
<p>その横のビデオカメラアイコンの「Export」ボタンで、動画を録画・出力できます。</p>
<p>↓作ったアニメーションの動画の例</p>
<div style="width: 854px;" class="wp-video"><video class="wp-video-shortcode" id="video-14001-8" width="854" height="480" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2018/06/faf827cbc1792d1a1a5a0ebbada13990.mp4?_=8" /><a href="/uploads-archive/2018/06/faf827cbc1792d1a1a5a0ebbada13990.mp4">/uploads-archive/2018/06/faf827cbc1792d1a1a5a0ebbada13990.mp4</a></video></div>


XDのデータからアニメーションつきのプロトタイプを作れるCompositor

<p>2018年は3Dの表現を使ったサイトが増えると予想されています（参考：<a href="http://photoshopvip.net/106875" target="_blank" rel="noopener">PHOTOSHOPVIP</a>）。実際、パララックスやWEBGLなど使ったウェブサイトを見かける機会が少しずつ増えています。</p>
<p>しかしながら、いざ3Dの表現を取り入れてみようと思っても、これまでずっとWEBは2Dでデザインを行ってきたこともあり、3Dの表現がどのような場面に向いていて、どのような使い方をすれば効果的なのか、なかなか思いつかなかったため、自分なりにメリットとデメリットを考えてみることにしました。</p>
<h2>メリット</h2>
<h3>リアル（現実の見た目に近い）</h3>
<ul>
<li class="p1">臨場感、シズル感が求められるものに効果的</li>
<li class="p1">状態を想像しやすい</li>
</ul>
<h3 class="p1">空間が広い ⇔ 奥行きがある</h3>
<ul>
<li class="p1">多くの情報を取り扱える可能性（重なる箇所への案内がネックになる）</li>
</ul>
<h3 class="p1">現実との連続的表現がしやすい(<span class="s1">AR</span>)</h3>
<ul>
<li class="p1">現実に近い状態で、大きさなどの確認ができる</li>
<li class="p1">非常に高い臨場感を表現できる可能性</li>
</ul>
<h3 class="p1">表現の幅が広がる</h3>
<ul>
<li class="p1">立体ならではの表現が直接的にできる</li>
<li class="p1">アート的表現の選択肢として</li>
<li class="p1">立体ならではの<span class="s1"> UI </span>の可能性</li>
</ul>
<h2>デメリット</h2>
<h3 class="p1">デバイスへ要求するパフォーマンスが大きくなる</h3>
<ul>
<li class="p1">軽量化の努力が必要</li>
<li class="p1">パフォーマンスの犠牲に似合った効果があるか、十分な検証が必要</li>
</ul>
<h3 class="p1">操作が煩雑化しがち</h3>
<ul>
<li class="p1">扱う軸が増えるので、その軸をどう扱うか、明確に定義する必要がある</li>
<li class="p1">現実と同じ操作はできない。あくまでも<span class="s1"> 2D </span>への擬似的な表現なので、現実とのギャップがある</li>
<li class="p1">現実と操作が違うので、共通化された操作を用いるか、慣れるまでの練習の機会が許されるか、操作説明がなければ、ユーザーは操作できない</li>
</ul>
<h3 class="p1">設置の難易度が高い</h3>
<ul>
<li class="p2">3D <span class="s2">の知識</span></li>
<li class="p2">デバイス、ブラウザに求められる最低パフォーマンスの高さ</li>
<li class="p1">利用できる空間の制限 ⇔ ある程度面積がなければ、<span class="s1">2D </span>の場合より複雑がゆえに視認性が下がりメリットが薄くなりがち</li>
</ul>


WEB上での3D表現について、2Dと比較した強みと弱みを考えてみました

<p>デザインツールといえば、IllustratorやPhotoshopが定番だったと思いますが、sketchの台頭から徐々に変わりつつあるようです。</p>
<p>sketchは興味は常に持ちつつも実際には使用せず&#8230;という状況が続いております。</p>
<p>デザインとプロトタイプの機能を両方持ち合わせたツールが言わずと知れた「Adobe XD」ですが、<br />
どんどんパワーアップしており、使い勝手がよくなっています。私は基本的にはこのツールが一番なのかなと思ってしまいます。</p>
<p>早速最近見かけて良さそうだなと思ったツールを紹介していきます。</p>
<h2>Figma</h2>
<p><img decoding="async" loading="lazy" width="1024" height="513" src="/uploads-archive/2017/03/8fc08622e7c39f4b72995783bbad1ecf-1024x513.png" alt="スクリーンショット 2017-03-14 14.38.22" class="alignnone size-large wp-image-12650" srcset="/uploads-archive/2017/03/8fc08622e7c39f4b72995783bbad1ecf-1024x513.png 1024w, /uploads-archive/2017/03/8fc08622e7c39f4b72995783bbad1ecf-300x150.png 300w, /uploads-archive/2017/03/8fc08622e7c39f4b72995783bbad1ecf-768x385.png 768w, /uploads-archive/2017/03/8fc08622e7c39f4b72995783bbad1ecf-228x114.png 228w, /uploads-archive/2017/03/8fc08622e7c39f4b72995783bbad1ecf.png 1277w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>Sketchに似たデザインツールということなんですが、ブラウザ上でもdesktopでも使用できます。<br />
そしてなんといっても、「オンラインで複数人が同一デザインを作成、編集できる」というのがスゴい点です！</p>
<p>他にも、<br />
・バージョン管理機能<br />
・コメント機能<br />
があり、複数人で作業するのに適しています。</p>
<p>なんと、無料ということなので気軽に導入できますし、お客さんと共有しながら修正指示をもらうということも出来るかもしれません。</p>
<p><a href="https://www.figma.com/" target="_blank">Figma: the collaborative interface design tool.</a></p>
<h2>Pingendo</h2>
<p><img decoding="async" loading="lazy" width="1024" height="549" src="/uploads-archive/2017/03/ecbbf2c4016e38bb21d3627333175783-1024x549.png" alt="スクリーンショット 2017-03-14 14.38.36" class="alignnone size-large wp-image-12651" srcset="/uploads-archive/2017/03/ecbbf2c4016e38bb21d3627333175783-1024x549.png 1024w, /uploads-archive/2017/03/ecbbf2c4016e38bb21d3627333175783-300x161.png 300w, /uploads-archive/2017/03/ecbbf2c4016e38bb21d3627333175783-768x412.png 768w, /uploads-archive/2017/03/ecbbf2c4016e38bb21d3627333175783-228x122.png 228w, /uploads-archive/2017/03/ecbbf2c4016e38bb21d3627333175783.png 1282w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>Bootstrapをベースにしたプロトタイプツールということですが、こちらダウンロードして使用します。無料です。<br />
こちらはデザインというよりワイヤーフレームの作成にいいかもしれません。<br />
bootstrapがベースなので、普通のワイヤーよりもキレイな見た目で作れるかと思います。</p>
<p><a href="https://pingendo.com/" target="_blank">Pingendo &#8211; web authoring with comfort</a></p>
<h2>Framer</h2>
<p><img decoding="async" loading="lazy" width="1024" height="549" src="/uploads-archive/2017/03/59e152531672db40687a7256d32803c2-1024x549.png" alt="スクリーンショット 2017-03-14 14.38.48" class="alignnone size-large wp-image-12652" srcset="/uploads-archive/2017/03/59e152531672db40687a7256d32803c2-1024x549.png 1024w, /uploads-archive/2017/03/59e152531672db40687a7256d32803c2-300x161.png 300w, /uploads-archive/2017/03/59e152531672db40687a7256d32803c2-768x412.png 768w, /uploads-archive/2017/03/59e152531672db40687a7256d32803c2-228x122.png 228w, /uploads-archive/2017/03/59e152531672db40687a7256d32803c2.png 1271w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>こちらはプロトタイプツールで割りと自由な感じでモックアップが作れます。<br />
有料のツールですが、無料で2週間試すことできます。</p>
<p>動きは元からあるものもありますが、特徴的なのがjavascriptを使って動きを付けることも出来る点です。javascriptといっても簡単に扱えるようになっているので、知らなくても多少使えばすぐ慣れるかと思います。</p>
<p>photoshop,sketch,先程紹介したFigmaのファイルをインポートすることが出来るので連携も良いい感じです。</p>
<p><a href="https://framer.com/" target="_blank">Framer &#8211; Design interactive prototypes for web &amp; mobile</a></p>
<h2>draw.io</h2>
<p><img decoding="async" loading="lazy" width="1024" height="517" src="/uploads-archive/2017/03/a341d1e35e2a08735c4b5e5137cd78cf-1024x517.png" alt="スクリーンショット 2017-03-14 14.39.06" class="alignnone size-large wp-image-12653" srcset="/uploads-archive/2017/03/a341d1e35e2a08735c4b5e5137cd78cf-1024x517.png 1024w, /uploads-archive/2017/03/a341d1e35e2a08735c4b5e5137cd78cf-300x152.png 300w, /uploads-archive/2017/03/a341d1e35e2a08735c4b5e5137cd78cf-768x388.png 768w, /uploads-archive/2017/03/a341d1e35e2a08735c4b5e5137cd78cf-228x115.png 228w, /uploads-archive/2017/03/a341d1e35e2a08735c4b5e5137cd78cf.png 1312w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>最後に紹介するのは、デザインツールでもプロトタイプでもないのですが、良さそうと思ったので紹介します。</p>
<p>こちらは企画書とか共有資料に使えそうな図面を簡単に作成することができます。<br />
無料かつアカウントの必要もありません。</p>
<p>フローチャートとか構成図とかにいいと思います。<br />
もちろんワイヤーも作れないことはないです。</p>
<p>使い勝手が非常に良さそうなので、ディレクターとかには重宝しそうです！</p>
<p><a href="https://www.draw.io/" target="_blank">draw.io</a></p>
<p>以前にも違うツールを紹介している記事もありますので、そちらもぜひ興味があれば覗いてみてください。<br />
<a href="/designer/web%e3%82%b5%e3%82%a4%e3%83%88%e3%83%bb%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e3%83%a2%e3%83%83%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e3%83%84/" target="_blank">webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！ | スターフィールド株式会社</a></p>


最近の素晴らしいデザイン・プロトタイプツールを紹介

グリッド状のレイアウトを補助するjQueryプラグイン作りました

<p>自社のサイト、サービス、または好きなサイトのフォントを、試しにwebフォントに変更出来るシミュレーターがありました。</p>
<h3>ダイナコムウェア</h3>
<p>これはDynaFontというwebフォントのサービスを行っている「ダイナコムウェア」さんの一部のサービスになります。</p>
<p>軽く、ダイナコムウェアさんの紹介をしておきますと、<br />
元々台湾で設立された会社で、フォントの発明・販売を行っていたそうです。<br />
近年webフォントのサービスをはじめたそうです。</p>
<p><img decoding="async" loading="lazy" width="1024" height="528" class="alignnone size-large wp-image-12536" src="/uploads-archive/2017/02/be1b3c98a37cf35ec2f1e403a3d2ec48-1024x528.png" alt="スクリーンショット 2017-02-07 11.51.33" srcset="/uploads-archive/2017/02/be1b3c98a37cf35ec2f1e403a3d2ec48-1024x528.png 1024w, /uploads-archive/2017/02/be1b3c98a37cf35ec2f1e403a3d2ec48-300x155.png 300w, /uploads-archive/2017/02/be1b3c98a37cf35ec2f1e403a3d2ec48-768x396.png 768w, /uploads-archive/2017/02/be1b3c98a37cf35ec2f1e403a3d2ec48-228x117.png 228w, /uploads-archive/2017/02/be1b3c98a37cf35ec2f1e403a3d2ec48.png 1440w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>以前、<br />
<a href="/designer/%e6%97%a5%e6%9c%ac%e8%aa%9e%e3%81%aeweb%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92%e6%8f%90%e4%be%9b%e3%81%97%e3%81%a6%e3%81%84%e3%82%8b%e3%82%b5%e3%83%bc%e3%83%93%e3%82%b95%e3%81%a4/" target="_blank">日本語のwebフォントを提供しているサービス5つ | スターフィールド株式会社</a><br />
としてwebフォントのサービスを行っている会社を紹介しましたが、他と比べると、台湾生まれなこともあり、中国語に強いのと、変わったフォントが多くあります。（バラエティ番組やアニメで使用されることも多いようです）</p>
<p>僕が一番良いと思ったのは、値段です。<br />
webフォントを導入したいけどお金がない、出ないという問題で断念するかと思います。</p>
<p><span style="font-size: 14pt;">しかし、DynaFontは一書体につき、<strong>14,400</strong>円</span>(一年の価格です！)<br />
<span style="font-size: 14pt;"> そしてなんと<strong>PV制限なし</strong>！</span>(2016年度のことで今後変わるかも)</p>
<p>これは他のサービスと比べるとかなり良いコスパかと思います！！<br />
(※2017年2月現在)</p>
<h3>ダイナコムウェアDynaFontのWebフォントシミュレーター</h3>
<p>話が逸れてしまいましたが、シミュレーターの話を進めたいと思います。</p>
<p>webフォントを試せるサービスなんて、僕は初めてみました。</p>
<p><a href="http://dfo.dynacw.co.jp/Simulator/DFOSimulation.aspx" target="_blank">Webフォントシミュレーター|DynaFont Online</a></p>
<p><img decoding="async" loading="lazy" width="1024" height="348" class="alignnone size-large wp-image-12537" src="/uploads-archive/2017/02/0ee3a4f58f53f269b0e70faabff2fed8-1024x348.png" alt="スクリーンショット 2017-02-07 12.00.00" srcset="/uploads-archive/2017/02/0ee3a4f58f53f269b0e70faabff2fed8-1024x348.png 1024w, /uploads-archive/2017/02/0ee3a4f58f53f269b0e70faabff2fed8-300x102.png 300w, /uploads-archive/2017/02/0ee3a4f58f53f269b0e70faabff2fed8-768x261.png 768w, /uploads-archive/2017/02/0ee3a4f58f53f269b0e70faabff2fed8-228x77.png 228w, /uploads-archive/2017/02/0ee3a4f58f53f269b0e70faabff2fed8.png 1210w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>フォントのサンプルはどのサービスもしっかり用意されていますが、<br />
やはり、実際のサイトなんかで試せた方がわかりやすいですよね！</p>
<p>自社のサイトを試しにやってみたいと思います。</p>
<h4>Before</h4>
<p><img decoding="async" loading="lazy" width="1024" height="510" class="alignnone size-large wp-image-12538" src="/uploads-archive/2017/02/4f4eb72a956712b8edd6c06abd22a948-1024x510.png" alt="スクリーンショット 2017-02-07 12.12.54" srcset="/uploads-archive/2017/02/4f4eb72a956712b8edd6c06abd22a948-1024x510.png 1024w, /uploads-archive/2017/02/4f4eb72a956712b8edd6c06abd22a948-300x150.png 300w, /uploads-archive/2017/02/4f4eb72a956712b8edd6c06abd22a948-768x383.png 768w, /uploads-archive/2017/02/4f4eb72a956712b8edd6c06abd22a948-228x114.png 228w, /uploads-archive/2017/02/4f4eb72a956712b8edd6c06abd22a948.png 1338w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<h4>After</h4>
<p><img decoding="async" loading="lazy" width="1024" height="720" class="alignnone size-large wp-image-12539" src="/uploads-archive/2017/02/75c7d6076c333b58db143a086db68960-1024x720.png" alt="スクリーンショット 2017-02-07 12.12.08" srcset="/uploads-archive/2017/02/75c7d6076c333b58db143a086db68960-1024x720.png 1024w, /uploads-archive/2017/02/75c7d6076c333b58db143a086db68960-300x211.png 300w, /uploads-archive/2017/02/75c7d6076c333b58db143a086db68960-768x540.png 768w, /uploads-archive/2017/02/75c7d6076c333b58db143a086db68960-228x160.png 228w, /uploads-archive/2017/02/75c7d6076c333b58db143a086db68960.png 1165w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>良し悪しは別として、けっこう印象が変わりますね笑</p>
<p>もう一つやってみたいと思います。</p>
<p><a href="https://catseye.jp/" target="_blank">CAT&apos;S EYE &#8211; カラコン通販のキャッツアイ</a></p>
<h4>Before</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12540" src="/uploads-archive/2017/02/5df65fe5caecd22957a85d1c37b6cedf.png" alt="スクリーンショット 2017-02-07 12.17.31" width="739" height="822" srcset="/uploads-archive/2017/02/5df65fe5caecd22957a85d1c37b6cedf.png 739w, /uploads-archive/2017/02/5df65fe5caecd22957a85d1c37b6cedf-270x300.png 270w, /uploads-archive/2017/02/5df65fe5caecd22957a85d1c37b6cedf-228x254.png 228w" sizes="(max-width: 739px) 100vw, 739px" /></p>
<h4>After (DFP優雅宋W7,W3)</h4>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12541" src="/uploads-archive/2017/02/edbf2ceeaa93d0a7d057a9d5ec12c81a.png" alt="スクリーンショット 2017-02-07 12.21.02" width="735" height="830" srcset="/uploads-archive/2017/02/edbf2ceeaa93d0a7d057a9d5ec12c81a.png 735w, /uploads-archive/2017/02/edbf2ceeaa93d0a7d057a9d5ec12c81a-266x300.png 266w, /uploads-archive/2017/02/edbf2ceeaa93d0a7d057a9d5ec12c81a-228x257.png 228w" sizes="(max-width: 735px) 100vw, 735px" /></p>
<p>印象変わって面白いですね！</p>
<h3>終わり</h3>
<p>リニューアル時や、何かしら工夫したい時に試してみるといいかもしれません。<br />
ただ、フォントを変更して遊ぶだけでも楽しいです笑</p>
<p>海外のサイト(英語)はGoogleのおかげでwebフォントを導入しやすいため、かなり多くのサイトで導入されていますが、日本はどうなっていくのか気になる所です。</p>
<p>とはいえ、日本のサイトで1,2年前に比べると、導入しているサイトが増えているように思います。<br />
今後、webフォントの導入がデフォルトになる流れが来るのでしょうか？</p>
<p>制作者としてはそうなることを願っています。</p>
<p>昔書いた、webフォント関連の記事もよろしければご覧ください。</p>
<p><a href="/designer/%e3%83%95%e3%83%aa%e3%83%bc%e3%81%a7%e4%bd%bf%e3%81%88%e3%82%8b%e6%97%a5%e6%9c%ac%e8%aa%9e%e3%81%aeweb%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92%e4%bd%bf%e3%81%8a%e3%81%86%ef%bc%81%ef%bc%81/" target="_blank">フリーで使える日本語のwebフォントを使おう！！</a>(2016.7)</p>
<p><a href="/designer/%e6%97%a5%e6%9c%ac%e8%aa%9e%e3%81%aeweb%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92%e6%8f%90%e4%be%9b%e3%81%97%e3%81%a6%e3%81%84%e3%82%8b%e3%82%b5%e3%83%bc%e3%83%93%e3%82%b95%e3%81%a4/" target="_blank">日本語のwebフォントを提供しているサービス5つ</a>(2015.8)</p>
<p><a href="/designer/%e3%83%95%e3%83%aa%e3%83%bc%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92web%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%81%a8%e3%81%97%e3%81%a6%e3%82%b5%e3%82%a4%e3%83%88%e3%81%a7%e4%bd%bf%e7%94%a8/" target="_blank">フリーフォントをwebフォントとしてサイトで使用してみる</a>(2014.8)</p>


好きなサイトを好きなフォントで試せる「webフォントシミュレーター」

<p>WEBデザインにおいてフラットデザイン(マテリアルデザインを含む)が一般化した今、<br />
装飾によるデザインに頼れないがゆえ、タイポグラフィの重要性はとても大きなものとなっています。</p>
<p>タイポグラフィの中でも、行間(line-height)はページの読みやすさに直接関係してくるため、重要なものです。<br />
読みやすさ、即ち、わかりやすさ は美しさのベースとなるものなので、<br />
デザイン性が重視されるサイトこそ必要性は高くなります。</p>
<p>私は正直なところ、これまでデザインするときに行間をほとんど感覚で決めていました。<br />
しかし恥ずかしながら最近になって、行間にもちゃんとルールがあるということを知りました。</p>
<p>ルールを知っていれば適切なデザインを迷わず効率的に行うことができますので、<br />
重要なポイントをまとめてみました。</p>
<h2>行間と行長</h2>
<p>まず、行間と行長の関係について。<br />
ここでは行長を一行あたりの文字数として扱います。（単位: 1文字 = 1W）</p>
<p>行長が長い場合、<br />
行間が狭いと、視線の移動中にどこを見ていたかわかり辛くなるために、<br />
美しくないデザインとなります。<br />
そのため、行長が長い場合は、行間を大きめにします。</p>
<p><a href="/uploads-archive/2017/01/line-height01-1.png"><img decoding="async" loading="lazy" class="alignnone wp-image-12460 size-full" src="/uploads-archive/2017/01/line-height01-1.png" alt="line-height01" width="760" height="134" srcset="/uploads-archive/2017/01/line-height01-1.png 760w, /uploads-archive/2017/01/line-height01-1-300x53.png 300w, /uploads-archive/2017/01/line-height01-1-228x40.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<p><a href="/uploads-archive/2017/01/line-height02-1.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12461" src="/uploads-archive/2017/01/line-height02-1.png" alt="line-height02" width="760" height="153" srcset="/uploads-archive/2017/01/line-height02-1.png 760w, /uploads-archive/2017/01/line-height02-1-300x60.png 300w, /uploads-archive/2017/01/line-height02-1-228x46.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<p>逆に行長が短い場合、<br />
行間が広いと、文字のまとまり感がなくなるため、<br />
美しくないデザインとなります。<br />
そのため、行長が短い場合は、行間を小さめにします。</p>
<p><a href="/uploads-archive/2017/01/line-height03-1.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12462" src="/uploads-archive/2017/01/line-height03-1.png" alt="line-height03" width="760" height="189" srcset="/uploads-archive/2017/01/line-height03-1.png 760w, /uploads-archive/2017/01/line-height03-1-300x75.png 300w, /uploads-archive/2017/01/line-height03-1-228x57.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<h2>行間と行長とフォントサイズ</h2>
<p>フォントサイズが小さくなれば、<br />
行長が長くなりがちとなり、<br />
行間は広くなりがちとなります。</p>
<p>ただ、WEBページではline-heightを単位なしの相対値で指定できるので、<br />
行間が広くなる問題は回避しやすいかもしれません。</p>
<p>しかしながら、行長が長くなると、行間を適切に設定しても読みにくくなることは避けられないため、行長が適切な値になるように、要素自体の横幅を適切に調整して、<br />
行長が長くなりすぎないように配慮する必要があります。</p>
<p><a href="/uploads-archive/2017/01/line-height04.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12463" src="/uploads-archive/2017/01/line-height04.png" alt="line-height04" width="760" height="141" srcset="/uploads-archive/2017/01/line-height04.png 760w, /uploads-archive/2017/01/line-height04-300x56.png 300w, /uploads-archive/2017/01/line-height04-228x42.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<p><a href="/uploads-archive/2017/01/line-height05.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12467" src="/uploads-archive/2017/01/line-height05.png" alt="line-height05" width="760" height="150" srcset="/uploads-archive/2017/01/line-height05.png 760w, /uploads-archive/2017/01/line-height05-300x59.png 300w, /uploads-archive/2017/01/line-height05-228x45.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<p><a href="/uploads-archive/2017/01/line-height06.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12464" src="/uploads-archive/2017/01/line-height06.png" alt="line-height06" width="760" height="136" srcset="/uploads-archive/2017/01/line-height06.png 760w, /uploads-archive/2017/01/line-height06-300x54.png 300w, /uploads-archive/2017/01/line-height06-228x41.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<p>フォントサイズが大きくなれば、<br />
行長が短くなりがちになり、<br />
行間は狭くなりがちになります。</p>
<p>極端に文字が大きい場合、視線の移動が大きくなるのを防ぐため、行長を短くしたほうが見やすくなります。</p>
<p>レスポンシブでline-heightを相対値で指定している場合、<br />
デバイスによってフォントサイズが大きくなり、line-height不適切になって見づらくなる場合があるので、<br />
このあたりは注意が必要になってきます。</p>
<p><a href="/uploads-archive/2017/01/line-height07.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12465" src="/uploads-archive/2017/01/line-height07.png" alt="line-height07" width="760" height="243" srcset="/uploads-archive/2017/01/line-height07.png 760w, /uploads-archive/2017/01/line-height07-300x96.png 300w, /uploads-archive/2017/01/line-height07-228x73.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<p><a href="/uploads-archive/2017/01/line-height08.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12466" src="/uploads-archive/2017/01/line-height08.png" alt="line-height08" width="760" height="317" srcset="/uploads-archive/2017/01/line-height08.png 760w, /uploads-archive/2017/01/line-height08-300x125.png 300w, /uploads-archive/2017/01/line-height08-228x95.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<p><a href="/uploads-archive/2017/01/line-height09.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12468" src="/uploads-archive/2017/01/line-height09.png" alt="line-height09" width="760" height="390" srcset="/uploads-archive/2017/01/line-height09.png 760w, /uploads-archive/2017/01/line-height09-300x154.png 300w, /uploads-archive/2017/01/line-height09-228x117.png 228w" sizes="(max-width: 760px) 100vw, 760px" /></a></p>
<h2>まとめ</h2>
<table>
<tbody>
<tr>
<th>行長</th>
<td>多い<br />
(40W)</td>
<td>普通<br />
(25-35W)</td>
<td>少ない<br />
(15-20W)</td>
</tr>
<tr>
<th>line-height</th>
<td>小さく<br />
(1.5前後)</td>
<td>大きく<br />
(2.0前後)</td>
<td>小さく<br />
(1.5前後)</td>
</tr>
</tbody>
</table>
<p>もちろん、デザインのイメージによっては、全体的にline-heightを大きめにしたり小さくしたいと言った必要が出てくると思いますので、基準として参考にしたいと思います。</p>
<h3>参考図書</h3>
<p><a class="link" href="https://www.amazon.co.jp/dp/4797359226" target="_blank">タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック-[デザインラボ] 単行本 – 2010/12/2 大崎 善治 (著)</a></p>


Webのためのタイポグラフィ【行間編】

<p>レスポンシブデザインでは、<br />
PC、タブレット、スマホそれぞれに合わせて、フォントサイズを変更するということが多いと思います。</p>
<p>その際、タイトルなどのアイコンを、<br />
CSSでのアイコンの大きさや背景画像などをpxによって行っていた場合、<br />
フォントサイズごとに指定の変更を行う必要が出てきます。</p>
<p>私はずっとそうしてきたのですが、<br />
そうすると、アイコンが追加になったり、変更になった場合に、多くのCSSコードを追加・変更しなければならなくなるため、<br />
非常に面倒なことになります。</p>
<p>しかし、以下のサイトで、</p>
<p><a class="link" href="http://coliss.com/articles/build-websites/operation/css/resizeable-components-with-relative-units.html" target="_blank" rel="noopener">CSSの単位（em, rem）を使った、これから取り入れていきたい実装テクニックのまとめ | コリス</a></p>
<p>CSSでの単位として、emを積極的に使うことで、<br />
問題が解決されることを知りましたので、試しにやってみました。</p>
<p><a class="demo" href="/demo/ninomiya/121/">DEMO</a></p>
<h2>例</h2>
<p></p>

		<div id="crayon-649540264504a425741992" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
h2::before {
  content: "";
  display: inline-block;
  width: 1.333333em;
  height: 1.333333em;
  margin-right: 0.5em;
  background-image: url(images/icons.png);
  background-size: 10.416667em auto;
  vertical-align: middle;
}
.ttl-chat::before {
  background-position: 0 0;
}
.ttl-pc::before {
  background-position: -1.458333em 0;
}
.ttl-sp::before {
  background-position: -2.916667em 0;
}
.ttl-calender::before {
  background-position: -4.375em 0;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264504a425741992-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-2">2</div><div class="crayon-num" data-line="crayon-649540264504a425741992-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-4">4</div><div class="crayon-num" data-line="crayon-649540264504a425741992-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-6">6</div><div class="crayon-num" data-line="crayon-649540264504a425741992-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-8">8</div><div class="crayon-num" data-line="crayon-649540264504a425741992-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-10">10</div><div class="crayon-num" data-line="crayon-649540264504a425741992-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-12">12</div><div class="crayon-num" data-line="crayon-649540264504a425741992-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-14">14</div><div class="crayon-num" data-line="crayon-649540264504a425741992-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-16">16</div><div class="crayon-num" data-line="crayon-649540264504a425741992-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-18">18</div><div class="crayon-num" data-line="crayon-649540264504a425741992-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-20">20</div><div class="crayon-num" data-line="crayon-649540264504a425741992-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540264504a425741992-22">22</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264504a425741992-1"><span class="crayon-i">h2</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">content</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">""</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">inline</span>-<span class="crayon-i">block</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">1.333333em</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">1.333333em</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">margin</span>-<span class="crayon-i">right</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0.5em</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-7"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">image</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">url</span><span class="crayon-sy">(</span><span class="crayon-i">images</span>/<span class="crayon-i">icons</span><span class="crayon-sy">.</span><span class="crayon-i">png</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-8"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">size</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">10.416667em</span><span class="crayon-h"> </span><span class="crayon-i">auto</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-9"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">vertical</span>-<span class="crayon-i">align</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">middle</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-10"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540264504a425741992-11"><span class="crayon-sy">.</span><span class="crayon-i">ttl</span>-<span class="crayon-i">chat</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-12"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-13"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-14"><span class="crayon-sy">.</span><span class="crayon-i">ttl</span>-<span class="crayon-i">pc</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540264504a425741992-15"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">1.458333em</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-16"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540264504a425741992-17"><span class="crayon-sy">.</span><span class="crayon-i">ttl</span>-<span class="crayon-i">sp</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-18"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">2.916667em</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540264504a425741992-19"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-20"><span class="crayon-sy">.</span><span class="crayon-i">ttl</span>-<span class="crayon-i">calender</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-e">before</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540264504a425741992-21"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">background</span>-<span class="crayon-i">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span>-<span class="crayon-cn">4.375em</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540264504a425741992-22"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>今回の例では、</p>
<ol>
<li>width, height</li>
<li>background-size</li>
<li>background-position</li>
</ol>
<p>について、emを使った指定を行ってみました。</p>
<p>設定するときは、pxをemへ置き換えるための計算をしなくていはいけないので、若干手間のように感じますが、<br />
一つ設定してしまえば、あとは、font-sizeごとに設定する必要が無いため、<br />
全体としては手間を減らすことができました。</p>
<p>注意点としては、emで指定する場合、小数点6桁くらいまでは指定しないと、微妙にずれてしまうことがあるようです。</p>
<p>今後はこの方法を使っていきたいと思います。</p>
<p>&nbsp;</p>
<h3>追記(2019.09.10)：</h3>
<p><a href="https://launchcart.jp/blog/img%e3%82%bf%e3%82%b0%e3%81%a7%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a01%e3%81%a4%e3%81%aesvg%e7%94%bb%e5%83%8f%e3%82%92id%e3%81%a7%e5%87%ba%e3%81%97%e5%88%86%e3%81%91%e3%82%8b%e6%96%b9%e6%b3%95/" target="_blank" rel="noopener">1つのSVGでアイコンを出し分ける方法</a>を紹介しました</p>

【CSS】レスポンシブでは画像を使ったアイコンの指定をemで行う

<h3>前置き</h3>
<div style="padding-left: 15px;">
便利なPhotoshopですが<br />
隠れに隠れた機能が多いアプリケーション</p>
<p>そんなの知ってるよ！</p>
<p>と思うのも多々あるかと思いますが備忘録的な感じで紹介します</p></div>
<h3>特徴</h3>
<div style="padding-left: 15px;">
<p>WindowsではControlキーがMacのCommandキーに相当します。</p>
<ul>
<li>Shift : 選択範囲など「プラス」のイメージ</li>
<li>Control : コマンド実行、他Shift, Alt等との組み合わせ識別</li>
<li>Alt : 選択範囲など「マイナス」のイメージ</li>
</ul>
</div>
<h3>良く使うキー組み合わせ</h3>
<div style="padding-left: 15px;">
<table>
<tbody>
<tr>
<th>キー・マウス動作</th>
<th>動作内容</th>
</tr>
<tr>
<td>Control + T</td>
<td>選択されたレイヤーの自由変形</td>
</tr>
<tr>
<td>Control 押しながらドラッグ</td>
<td>選択レイヤーの移動</td>
</tr>
<tr>
<td>Control + Shift + クリック</td>
<td>複数レイヤー選択</td>
</tr>
<tr>
<td>Control + E</td>
<td>上位レイヤーと結合</td>
</tr>
<tr>
<td>Control + Shift + E</td>
<td>表示されているレイヤー統合</td>
</tr>
<tr>
<td>d</td>
<td>描画色・背景色を黒白に初期化</td>
</tr>
<tr>
<td>x</td>
<td>描画色・背景色の入れ替え</td>
</tr>
<tr>
<td>q</td>
<td>クイックマスクモード切り替え</td>
</tr>
<tr>
<td>Control + R</td>
<td>定規の表示・非表示切り替え</td>
</tr>
<tr>
<td>Tab</td>
<td>メインウィンドウ以外の表示・非表示切り替え</td>
</tr>
</tbody>
</table>
<p>※ 上記は設定で「ツールの変更にShiftキーを使用」を敢えて外しています</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/DL3J_nBjDG0?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/W8fgF99Q3YA?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
</div>


ps.jpg

Webデザインで使えそうなPhotoshop小技変

<p>私はこれまで、HTML＋CSSでテキストを組む場合で、<br />
左揃えを行う場合、</p>

		<div id="crayon-649540263e536258630715" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
text-align: left;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540263e536258630715-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263e536258630715-1"><span class="crayon-e ">text-align</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">left</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>しか、方法がないと思っていました。<br />
この方法を使った場合、テキストの右側は文章によって<br />
がたがたになってしまったり、<br />
中途半端なところで折り返してしまったりして、<br />
あまり美しくない場合が多いのが悩みでした。</p>
<p>しかし、とあるサイトのCSSを調べていると、<br />
たまたま、以下の様な記述を見つけました。</p>

		<div id="crayon-649540263e53a607946156" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
text-align: justify;
text-justify: inter-ideograph;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540263e53a607946156-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263e53a607946156-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263e53a607946156-1"><span class="crayon-e ">text-align</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">justify</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263e53a607946156-2"><span class="crayon-e ">text-justify</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">inter-ideograph</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>調べてみると、テキストを両端揃えをするための記述でした。<br />
しかも、すべての主要な最新ブラウザとIE8以上で利用できました。</p>
<p>↓こちらがDEMO</p>
<p><a class="demo" href="/demo/ninomiya/106/">DEMO</a></p>
<p>もっと早く知っていれば…と、恥ずかしながら今更ながらに気づきました。</p>
<p>今後は、どんどん利用していこうと思います。</p>

large_nino-eye-1.png

medium_nino-eye-1.png

small_nino-eye-1.png

thumbnail_nino-eye-1.png

nino-eye-1.png

知らなかった…CSSでテキストの両端揃えが普通にできた

<p>お買い物好きな女性ならネットサーフィンしていて「あ！コレいいな！」そう思ったらいつの間にかポチっとしちゃいますよね。</p>
<p>私も<del datetime="2016-04-11T09:40:01+00:00">無駄に</del>買い物が好きで、スマホでネットをウロウロしてるとつい買ってしまう事が多々あります。</p>
<p>そんな買い物好きな女が特に買ってしまいそうになるLPサイトをご紹介します。</p>
<h2>可愛かったり、綺麗だったり、につい目が引かれる</h2>
<blockquote><p><a href="http://www.wacoal.jp/ribbonbra/" target="_balak"><br />
 ※ ワコール | リボンブラ</a></p></blockquote>
<p>PC<br />
<a href="/uploads-archive/2016/04/lp07-e1460444024990.jpg" rel="attachment wp-att-10350"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10350" src="/uploads-archive/2016/04/lp07-e1460444024990.jpg" alt="lp07" width="498" height="368" /></a></p>
<p>スクロールすると歩く赤ずきんちゃん<br />
<a href="/uploads-archive/2016/04/lp08-e1460444035384.jpg" rel="attachment wp-att-10351"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10351" src="/uploads-archive/2016/04/lp08-e1460444035384.jpg" alt="lp08" width="498" height="368" /></a></p>
<p>SP<br />
<a href="/uploads-archive/2016/04/lp09.jpg" rel="attachment wp-att-10352"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10352" src="/uploads-archive/2016/04/lp09.jpg" alt="lp09" width="414" height="740" srcset="/uploads-archive/2016/04/lp09.jpg 414w, /uploads-archive/2016/04/lp09-168x300.jpg 168w, /uploads-archive/2016/04/lp09-228x408.jpg 228w" sizes="(max-width: 414px) 100vw, 414px" /></a></p>
<p>スマホでもスワイプで赤ずきんちゃんが歩きます。<br />
下着なので完璧に女性をターゲットにしているデザインですね、可愛くてつい見入ってしまいます。このギミック自体も面白くて見ちゃいますね。</p>
<blockquote><p>
<a href="http://www.surusuru.jp/cha/lp/sc01/"><br />
　※ スルスル茶 | 新発売キャンペーン</a></p></blockquote>
<p>PC<br />
<a href="/uploads-archive/2016/04/lp01-e1460368916209.jpg" rel="attachment wp-att-10305"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10305" src="/uploads-archive/2016/04/lp01-e1460368916209.jpg" alt="lp01" width="498" height="364" srcset="/uploads-archive/2016/04/lp01-e1460368916209.jpg 498w, /uploads-archive/2016/04/lp01-e1460368916209-300x219.jpg 300w, /uploads-archive/2016/04/lp01-e1460368916209-228x167.jpg 228w" sizes="(max-width: 498px) 100vw, 498px" /></a></p>
<p>SP<br />
<a href="/uploads-archive/2016/04/lp02-1.jpg" rel="attachment wp-att-10309"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10309" src="/uploads-archive/2016/04/lp02-1.jpg" alt="lp02" width="419" height="741" srcset="/uploads-archive/2016/04/lp02-1.jpg 419w, /uploads-archive/2016/04/lp02-1-170x300.jpg 170w, /uploads-archive/2016/04/lp02-1-228x403.jpg 228w" sizes="(max-width: 419px) 100vw, 419px" /></a></p>
<p>「もしかして･･･30歳になって急に太った？？？」</p>
<p>言われたらかなり傷付くワード＝自分が気になっていること。こういった特定のターゲットを絞ったキャッチコピーについ「そうそう」と続きを見てしまいます。さらに畳みかけるように”管理栄養士が作った”なんて書かれていたらそれなりの効果を期待しちゃったり、この商品は安心だと思いますよね。</p>
<p>イラストも女性が好きそうなかわいいキャラクターがメインに来ていて、全体的に説明もザックリしていてシンプルにまとまっているので、怪しいサイト特有のごちゃごちゃ感が無く買いやすいです。</p>
<blockquote><p>
　<a href="http://blacklabel.suzuin.co.jp/"><br />
※ プレミアム印章専門店SUZUIN | 鈴印ブラックレーベル</a></p></blockquote>
<p>PC<br />
<a href="/uploads-archive/2016/04/lp10.gif" rel="attachment wp-att-10360"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10360" src="/uploads-archive/2016/04/lp10.gif" alt="lp10" width="498" height="367" /></a></p>
<p>SP<br />
<a href="/uploads-archive/2016/04/lp11.jpg" rel="attachment wp-att-10362"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10362" src="/uploads-archive/2016/04/lp11.jpg" alt="lp11" width="414" height="741" srcset="/uploads-archive/2016/04/lp11.jpg 414w, /uploads-archive/2016/04/lp11-168x300.jpg 168w, /uploads-archive/2016/04/lp11-228x408.jpg 228w" sizes="(max-width: 414px) 100vw, 414px" /></a></p>
<p>でっかい写真をバーン！テキストがずっらーーー！<br />
場所によってはテキストが見辛い部分がありますが、全体のイメージと写真にこだわっているみたいですね。<br />
説明文はあまり見えなくても雰囲気でつい持ちたくなってしまいます。</p>
<p>ちなみにお値段は大体２万円～</p>
<blockquote><p><a href="http://u-tokinoirodori.com//lp/campaign/"><br />
　※ オールインワンセラム | 季乃彩</a></p></blockquote>
<p>PC<br />
<a href="/uploads-archive/2016/04/lp03-e1460369799532.jpg" rel="attachment wp-att-10310"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10310" src="/uploads-archive/2016/04/lp03-e1460369799532.jpg" alt="lp03" width="498" height="370" /></a></p>
<p>SP<br />
<a href="/uploads-archive/2016/04/lp04.jpg" rel="attachment wp-att-10311"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10311" src="/uploads-archive/2016/04/lp04.jpg" alt="lp04" width="412" height="740" srcset="/uploads-archive/2016/04/lp04.jpg 412w, /uploads-archive/2016/04/lp04-167x300.jpg 167w, /uploads-archive/2016/04/lp04-228x410.jpg 228w" sizes="(max-width: 412px) 100vw, 412px" /></a></p>
<p>パッと見はごちゃついてますが、「数量限定」「初回限定価格」「本品お試しキャンペーン」など･･･すごくそそられるキーワードが沢山書かれていますね。なくなり次第終了とも書かれていますので、ついそれだけで買っちゃいそうになっちゃいます。<del datetime="2016-04-11T09:40:01+00:00">まあ、なくなることなんてないんだろうけど。</del></p>
<p>購入画面（一部）<br />
<a href="/uploads-archive/2016/04/lp05.jpg" rel="attachment wp-att-10315"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10315" src="/uploads-archive/2016/04/lp05.jpg" alt="lp05" width="419" height="740" srcset="/uploads-archive/2016/04/lp05.jpg 419w, /uploads-archive/2016/04/lp05-170x300.jpg 170w, /uploads-archive/2016/04/lp05-228x403.jpg 228w" sizes="(max-width: 419px) 100vw, 419px" /></a></p>
<p>今すぐ購入からはごちゃついているTOPと打って変わってシンプルな詳細ページ。実際に使用したお客様のレビューが見られるのはとってもいいですね。</p>
<h2>おまけ</h2>
<blockquote><p><a href="http://www.hatalike.jp/ct/edit/takashi/index.html" target="_blank"><br />
　※ はたらく臓器inたかし｜求人・転職情報サイト【はたらいく】</a></p></blockquote>
<p>ECサイトではないけれど、なにこれおもしろい</p>
<blockquote><p><a href="https://mediplus-orders.jp/static/lp/an01/1064680/lp52/f/" target="_blank"><br />
　※ 30日間返金キャンペーン実施中！肌環境底上げコスメ『メディプラスゲル』</a>（</p></blockquote>
<p>肌の賞味期限･･･？</p>
<blockquote><p><a href="http://www.collage-shop.jp/shop/pages/bk_lp_b.aspx" target="_blank"><br />
　※ 敏感肌だってエイジングケア | B.K.AGE | 持田ヘルスケア株式会社 持田製薬グループ</a></p></blockquote>
<p>どこにでもあるECサイトですが、手書きフォントを使われていると親近感というか誰かの感想なのかな･･･とちょっと気になると思いました。</p>
<h2>まとめ</h2>
<p>LPって見てるだけでも面白いですよね。今回まとめてみて私はデザインで買ってしまう傾向があるんだなと思いました。<br />
するする茶、買おうかな･･･</p>


女の私がつい買ってしまいそうになるECサイトのLPデザインはコレ

スマホに合ったステップリストをインラインSVGで

SVGを使った面白そうなテキストのアニメーションを再現してみました

<h2>IE10以前はもう古い！？</h2>
<div style="padding-left: 15px;">
  Web屋の鬼門(？)のIEのサポート状況が大きく変わりました。</p>
<p>  サポートが終了すると何が変わるのか？<br />
  、、、と言いますと、公式から配布されていた<br />
  セキュリティ脆弱性対策バッチが今後なくなる。</p>
<p>  つまり脆弱性をついたスクリプトに対して無防備となってしまうと言う事です。
</p></div>
<h2>各OS別 サポート状況まとめ</h2>
<div style="padding-left: 15px;">
  Windows Vista : IE7, IE8 ともに2016年1月13日で終了。IE9は2017年4月12日に終了。<br />
  Windows 7 : IE8, IE9, IE10 ともに2016年1月13日で終了。IE11は2020年1月15日に終了。<br />
  Windows 8 : OSそのものが2016年1月13日にてサポート終了。<br />
  Windows 8.1 : IE11 のみ。2023年1月11日に終了。<br />
  Windwos 10 : IE11 2025年10月15日に終了。(MS Edgeと同じ)</p>
<p>  ※ その他Windows Serverなどについては<a href="http://www.atmarkit.co.jp/ait/articles/1503/11/news134.html">こちら</a>参照のこと
</div>
<h2>総評</h2>
<div style="padding-left: 15px;">
  未だにシステム移管などのコスト節減のために旧システムを<br />
  使用したままの企業やコンシューマーが多いのが現状。</p>
<p>  しかしセキュリティ面やブラウザでの新機能／汎用性の高いサービス向上のため<br />
  適度なシステム移行が好ましいと感じられた。</p>
<p>  ※ ただし新システム移行を無理強いするのはその限りではない。
</p></div>


ブラウザ事情の変化

<p>今年もこの季節がやってまいりました</p>
<p><a href="http://designmodo.com/web-design-trends-2016/" target="_blank">http://designmodo.com/web-design-trends-2016/</a></p>
<p>&nbsp;</p>
<p>自分の英語の勉強も兼ねて翻訳・要約してみた</p>
<p>&nbsp;</p>
<h2>縦スクロールとそのパターン</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9069" src="/uploads-archive/2016/01/2016webtrend_1.jpg" alt="2016webtrend_1" width="900" height="496" srcset="/uploads-archive/2016/01/2016webtrend_1.jpg 900w, /uploads-archive/2016/01/2016webtrend_1-300x165.jpg 300w, /uploads-archive/2016/01/2016webtrend_1-768x423.jpg 768w, /uploads-archive/2016/01/2016webtrend_1-228x126.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.beoplay.com/products/beoplayh7" target="_blank">http://www.beoplay.com/products/beoplayh7</a></p>
<p>モバイル端末からのアクセスが増えているので、今後ユーザーは縦スクロールの頻度が増え、 デザイナーは縦スクロールのユーザーインターフェイスをデザインすることの重要度が高まる</p>
<p>&nbsp;</p>
<h2>もっと、カード型デザイン</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9065" src="/uploads-archive/2016/01/2016webtrend_2.jpg" alt="2016webtrend_2" width="900" height="494" srcset="/uploads-archive/2016/01/2016webtrend_2.jpg 900w, /uploads-archive/2016/01/2016webtrend_2-300x165.jpg 300w, /uploads-archive/2016/01/2016webtrend_2-768x422.jpg 768w, /uploads-archive/2016/01/2016webtrend_2-228x125.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://block16omaha.com/" target="_blank">http://block16omaha.com/</a></p>
<p>マテリアルデザインから生まれたカード型デザインはアプリ、ウェブサイト、紙媒体などあらゆる場所で使われている。</p>
<p>カード型デザインはユーザーフレンドリーに情報整理ができ、作るのも楽しい。</p>
<p>更に、カード型デザインはデバイスを問わず動作するというメリットがある</p>
<p>&nbsp;</p>
<h2>ヒーロービデオヘッダー</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9066" src="/uploads-archive/2016/01/2016webtrend_3.jpg" alt="2016webtrend_3" width="900" height="490" srcset="/uploads-archive/2016/01/2016webtrend_3.jpg 900w, /uploads-archive/2016/01/2016webtrend_3-300x163.jpg 300w, /uploads-archive/2016/01/2016webtrend_3-768x418.jpg 768w, /uploads-archive/2016/01/2016webtrend_3-228x124.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://follow-your-intuition.com/" target="_blank">http://follow-your-intuition.com/</a></p>
<p>ウェブデザインは映画制作のようになるだろう。</p>
<p>回線速度やモジュールの発展により映画のような体験をサイトに盛り込むことができるようになってきている。</p>
<p>ウェブ上の動画は、小さなものからフルカットへと進化し、高解像度で、くっきりとさくさく動作する。</p>
<p>これはユーザーに新しい体験だが、テレビでお馴染みの体験といえる</p>
<p>&nbsp;</p>
<h2>微細なアニメーション</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9067" src="/uploads-archive/2016/01/2016webtrend_4.jpg" alt="2016webtrend_4" width="900" height="487" srcset="/uploads-archive/2016/01/2016webtrend_4.jpg 900w, /uploads-archive/2016/01/2016webtrend_4-300x162.jpg 300w, /uploads-archive/2016/01/2016webtrend_4-768x416.jpg 768w, /uploads-archive/2016/01/2016webtrend_4-228x123.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://labs.convoy.me/camper/#!/landing" target="_blank">http://labs.convoy.me/camper/#!/landing</a></p>
<p>アニメーションは2015年からの最も大きなトレンドの1つだ。</p>
<p>ヒーローヘッダのようなサイトの顔から、見逃してしまうほど小さいものまで、<br />
アニメーションは至る所に存在している。</p>
<p>アニメーションを使う上で最も重要なことは、なぜこのアニメーションを作り、何を想定しているかといった<br />
目的を明らかにすることだ。</p>
<p>&nbsp;</p>
<h2>インタラクションデザイン</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9068" src="/uploads-archive/2016/01/2016webtrend_5.jpg" alt="2016webtrend_5" width="900" height="473" srcset="/uploads-archive/2016/01/2016webtrend_5.jpg 900w, /uploads-archive/2016/01/2016webtrend_5-300x158.jpg 300w, /uploads-archive/2016/01/2016webtrend_5-768x404.jpg 768w, /uploads-archive/2016/01/2016webtrend_5-228x120.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.wove.com/" target="_blank">http://www.wove.com/</a></p>
<p>アニメーションと同時に活用されているのがインタラクションデザインだ。</p>
<p>インタラクションデザインはアプリやモバイルサイトにおいて、ユーザーとデバイスをつなぐ軸である。</p>
<p>良いインタラクションデザインはごくわずかな場合もあるが、ユーザーに価値を与えている。</p>
<p>メッセージ受信時のアラームから、ゲーム中にあなたの番が来た時の短い音など、<br />
ほんの小さなインタラクションデザインが人々とデバイスのやりとりを形作っている</p>
<p>&nbsp;</p>
<h2>更に美しいタイポグラフィ</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9059" src="/uploads-archive/2016/01/2016webtrend_6.jpg" alt="2016webtrend_6" width="900" height="488" srcset="/uploads-archive/2016/01/2016webtrend_6.jpg 900w, /uploads-archive/2016/01/2016webtrend_6-300x163.jpg 300w, /uploads-archive/2016/01/2016webtrend_6-768x416.jpg 768w, /uploads-archive/2016/01/2016webtrend_6-228x124.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.viens-la.com/" target="_blank">http://www.viens-la.com/</a></p>
<p>合理化されたインターフェイスは美しいタイポグラフィへと導く。</p>
<p>大きくて太いタイポグラフィは他のトレンドとマッチすることから、今後も継続するだろう。</p>
<p>このシンプルな字体は他の要素との空間を広げ、高い可読性によりメッセージを伝えることができる。</p>
<p>単に読み易い書体のペアや、楽しくて珍しいものはぜひ挑戦したい小技だ</p>
<p>&nbsp;</p>
<h2>イラストとスケッチ</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9060" src="/uploads-archive/2016/01/2016webtrend_7.jpg" alt="2016webtrend_7" width="900" height="489" srcset="/uploads-archive/2016/01/2016webtrend_7.jpg 900w, /uploads-archive/2016/01/2016webtrend_7-300x163.jpg 300w, /uploads-archive/2016/01/2016webtrend_7-768x417.jpg 768w, /uploads-archive/2016/01/2016webtrend_7-228x124.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://orangeyouglad.com/" target="_blank">http://orangeyouglad.com/</a></p>
<p>イラストやスケッチはサイトに気まぐれで楽しい要素を与える。</p>
<p>これらは全てのサイトに当てはまり、決して子供向けのサイトだけのものではない。</p>
<p>イラストは、アイコンやその他の要素などサイトの細かな部分から人気が高まってきている<br />
イラストはサイトにパーソナルな印象を持たせるという点が良い。</p>
<p>手書きのイラストやスケッチアイコンはユーザーに個性を感じさせ、ユーザーとの長いつながりに貢献するだろう</p>
<p>&nbsp;</p>
<h2>大胆で明るい色調 (80&#8217;sな雰囲気)</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9061" src="/uploads-archive/2016/01/2016webtrend_8.jpg" alt="2016webtrend_8" width="900" height="477" srcset="/uploads-archive/2016/01/2016webtrend_8.jpg 900w, /uploads-archive/2016/01/2016webtrend_8-300x159.jpg 300w, /uploads-archive/2016/01/2016webtrend_8-768x407.jpg 768w, /uploads-archive/2016/01/2016webtrend_8-228x121.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://circlesconference.com/" target="_blank">http://circlesconference.com/</a></p>
<p>大胆で明るい色調はフラットデザインとともに増加してきている。</p>
<p>Googleの&#8221;Material Design documentation&#8221;も協議が進んでおり、&#8221;Dribbble&#8221;を見ると色が散々としている。</p>
<p>これらはキーとなる指標であり、この色は年内にされに大きくなるだろう。</p>
<p>大胆な色使いにおいての幾つかの変化として、これらの色を使った文字がトレンドとなるだろう。</p>
<p>2015年はモノトーンが主流でしたが、80年代な大胆で明るい色使いが増えてくるだろう</p>
<p>&nbsp;</p>
<h2>ハンバーガーメニューと図解</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9062" src="/uploads-archive/2016/01/2016webtrend_9.jpg" alt="2016webtrend_9" width="900" height="425" srcset="/uploads-archive/2016/01/2016webtrend_9.jpg 900w, /uploads-archive/2016/01/2016webtrend_9-300x142.jpg 300w, /uploads-archive/2016/01/2016webtrend_9-768x363.jpg 768w, /uploads-archive/2016/01/2016webtrend_9-228x108.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://www.primeit.pt/en/" target="_blank">http://www.primeit.pt/en/</a></p>
<p>多くのデザイナーが楽しいアイコンや、簡単にアイコンを作れるキットをリリースしている。</p>
<p>その他に重要な点として、SVGの普及により巨大なアイコンを実験的に使用するデザイナーが出現していることだ</p>
<p>&nbsp;</p>
<h2>リアルと空想の融合</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9062" src="/uploads-archive/2016/01/2016webtrend_9.jpg" alt="2016webtrend_9" width="900" height="425" srcset="/uploads-archive/2016/01/2016webtrend_9.jpg 900w, /uploads-archive/2016/01/2016webtrend_9-300x142.jpg 300w, /uploads-archive/2016/01/2016webtrend_9-768x363.jpg 768w, /uploads-archive/2016/01/2016webtrend_9-228x108.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://bluestag.co.uk/" target="_blank">http://bluestag.co.uk/</a></p>
<p>次のゲーミフィケーションとデザインのステップは、リアルと空想(ウェブデザインにより作られたもの)の境界をぼかすことだ。</p>
<p>バーチャルリアリティからウェブサイトまで、これらはあなたに新しい要素を見つける選択肢を与え、ユーザーはこのタイプのカスタマイズを好む傾向にある</p>
<p>&nbsp;</p>
<h2>スライダー</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9064" src="/uploads-archive/2016/01/2016webtrend_11.jpg" alt="2016webtrend_11" width="900" height="494" srcset="/uploads-archive/2016/01/2016webtrend_11.jpg 900w, /uploads-archive/2016/01/2016webtrend_11-300x165.jpg 300w, /uploads-archive/2016/01/2016webtrend_11-768x422.jpg 768w, /uploads-archive/2016/01/2016webtrend_11-228x125.jpg 228w" sizes="(max-width: 900px) 100vw, 900px" /></p>
<p><a href="http://yearinreview.fb.com/2015/us-presidential-election/" target="_blank">http://yearinreview.fb.com/2015/us-presidential-election/</a></p>
<p>まずはじめに、スライダーはウェブサイトの枠の中で画像を動かし複数見せることができた。</p>
<p>次の変化はフルスクリーンスライドだ。</p>
<p>それぞれのスライドは切替によって新たな内容を表示できる。クリック、スクロールや時間による処理もできる。<br />
ユーザーは前後のコンテンツに直感的に移動することができる。</p>
<p>このようなコンセプトは、数ヶ月のうちにさらに多く見かけることになるだろう</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ちなみに、以下は自分が昨年6月に2015年上半期のトレンドをまとめた記事</p>
<blockquote data-secret="znXQr4BvIU" class="wp-embedded-content"><p><a href="/officer/%e3%80%90web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%80%912015%e5%b9%b4-%e4%b8%8a%e5%8d%8a%e6%9c%9f%e3%81%ae%e3%83%88%e3%83%ac%e3%83%b3%e3%83%89.html">【Webデザイン】2015年 上半期のトレンド</a></p></blockquote>
<p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="display:none;" src="/officer/%e3%80%90web%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%80%912015%e5%b9%b4-%e4%b8%8a%e5%8d%8a%e6%9c%9f%e3%81%ae%e3%83%88%e3%83%ac%e3%83%b3%e3%83%89.html/embed#?secret=znXQr4BvIU" data-secret="znXQr4BvIU" width="500" height="282" title="埋め込まれた WordPress の投稿" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<p>&nbsp;</p>
<p>そんなに変わってない気がするのは自分だけだろうか。</p>
<p>モバイルファーストや動画は当たり前、あとはマテリアルデザインとSVGが着々と広まってきているといった印象だ</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #webデザイン

2024/11/20

2024/08/30

2024/05/31

2018/11/14

2018/06/13

2018/04/11

2017/03/15

2017/02/08

2017/02/07

2017/01/11

2016/10/12

2016/08/03

2016/06/01

2016/04/13

2016/04/06

2016/03/26

2016/01/13

2016/01/06