[メモ]文字間カーニング

 font-feature-settings: "palt";

[メモ]photoshop 色の置き換え

 まずは加工したい画像をPhotoshopで開いてください。 その後『イメージ』から『メニュー』、『色調補正』、『色の置き換え』を選択することで置き換えたいカラーを選択することが可能です。

[メモ]CSSグラーデーション

 background: linear-gradient(#f2e4bb, #d8c384);

[メモ]positionとtranslateを使って要素を中央に配置する方法

HTML

<div class="box">

<p>テキストテキスト</p>

<img src=xxx.jpg widht="600" height="400" alt="xxxx" >

</div> 

CSS

.box{

    position: relative;

}

.box p{

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

}

[メモ]日本語フォントこそ指定したい自動カーニング

 .selector {

  font-feature-settings: "palt";

}

ウェブデザイナー必見！美しいCSSグラデーションをコピペできる無料ツール17選まとめ

デザインでもっとも頭を悩ますことの多い「配色えらび」。配色を決まらずに、時間だけが過ぎてしまったという経験のあるひとも多いでしょう。
そんなときは、無料で使えるオンラインツールを利用してみましょう。今回は、グラデーションカラーに特化し、CSSコードも手軽にコピペできるツール17個をまとめてご紹介します。2018年のデザイントレンドをうまく反映したカラーリングだけでなく、お好みのグラデーションカラーも手軽に作成することができ、ウェブデザイン制作の時間短縮につながります。

>>ウェブデザイナー必見！美しいCSSグラデーションをコピペできる無料ツール17選まとめ
─情報元：PhotoshopVIPサイト様─

[CSS]文字に含まれる上下の余白を取り除いて、アイコンや画像とぴったり同じ高さにするスタイルシート

文字に含まれる上下の余白を取り除いて、矩形ぴったりの高さに、アイコンとぴったり同じ高さに、画像とツラが揃うようにするスタイルシートを生成するオンラインツールを紹介します。

「line-height」が影響して、ぴったりに揃わないことに悩んだことがあるかもしれません。そんな文字の余白を一番上と一番下の行のみ取り除きます。

>>[CSS]文字に含まれる上下の余白を取り除いて、アイコンや画像とぴったり同じ高さにするスタイルシート
─情報元：コリスサイト様─

素人にありがちなパッチワーク的SEO施策はもうやめよう

こんにちは、ナイルの渡邉です。早いものでもう4月ですね。本日からWebマーケやSEOのチームに新入メンバーが入ってきた会社も多いのではないでしょうか。ナイルにも優秀な新卒メンバーが入社してくれました。ところで、未経験のメンバーにSEOをインストールするのって、教えることもたくさんあるし大変ですよね。

個人的に、昨今のコンテンツSEOやオウンドメディアブームもあいまって、「SEO＝キーワードニーズのあるコンテンツをひたすら作ること」という‘ある側面だけを切り取った’SEOの考え方が蔓延していることに違和感があって、社内研修やお客様先でSEOについて話すときに「こういう順番で考えるのがいいよ」と話している内容を、新卒が入社したこのタイミングでブログに書こうと思います。

記事作成をメインとしたWebメディアのSEOに取り組まれている方や、HTMLタグや内部リンクなどの技術要件をメインとしたSEOに取り組まれている方も参考になると思うのでぜひ読んで見て下さい。前置きが長くなったので本題に入ります。

>>素人にありがちなパッチワーク的SEO施策はもうやめよう
─情報元：SEO HACKS公式ブログサイト様─

もう縦スクロールって疲れません？進化する私たちの指と視野

こんにちは！現役女子大生二人組による若者の今を伝えるメディア「ワカモノのトリセツ」です。

春休み満喫中の私たちは、自然と携帯を見る時間が増えました。
そんな時に、
「あれ？最近縦スクロールするのがもう嫌になってきたぞ？！」と思うようになったことに気づいたのをきっかけに、今回は縦スクロールについて私たちの最近の価値観をお話しします。

>>もう縦スクロールって疲れません？進化する私たちの指と視野
─情報元：ワカモノのトリセツサイト様─

HTMLとCSSで作れる！見出しに使えるおしゃれな文字装飾サンプル

CSS3がほとんどのブラウザでサポートされるようになり、今まで画像で再現するしかなかったデザインがCSSでも表現できるようになってきています。大昔にさかのぼると、角丸も作れない、なんて時代がありましたが、今となってはCSSを書くだけで実現できます。CSSでこれだけのことができるよ！と紹介したいのですがキリがないので、今回は「文字の装飾」にしぼってご紹介します。

Webでかわいくておしゃれな見出しを作るとなると、昔はデザインデータから画像を切り出して・・・と作業していましたが、HTMLとCSSで表現できれば色の変更などの編集や複製がとっても楽ですよね！
また、ホバーエフェクト(マウスオンで色が変わるなど)の適用も画像を使うより簡単です。
ここでは皆さんに「CSSだけでここまでデザインが再現できる」ということを知っていただきたく、いくつかサンプルを作ってみました。

>>HTMLとCSSで作れる！見出しに使えるおしゃれな文字装飾サンプル
─情報元：CJコラムサイト様─

ユーザーファーストなWebサイトのデザインとは？

Webサイトはユーザーが利用する状況を考慮し、使用するデバイスやプラットフォームに最適化された体験を提供する。そのためには、ユーザーが使いやすく、必要な情報に最短でたどり着くことができるインターフェースを作ることが必要だ。

わかりやすいUIを提供する
サイト上でどのようなインターフェースを提供する際でも、ユーザーが何をどのように使えばよいかがひと目で理解できることが重要です。なるべくシンプルな形で、ユーザーを混乱させない、わかりやすいインターフェースを作ることが必要です。そのために、次の3つの項目のチェックから始めてみましょう。

見た目と機能が合致しているか
混乱を招く言葉を使っていないか?
同じアクションに複数のデザインを用いていないか?

>>ユーザーファーストなWebサイトのデザインとは？
─情報元：impressサイト様─

Webデザイン、これからどうなる？すぐに使えるアイデア見本集58選

ウェブサイトのアイデア出しに困ったり、これからサイトを作成しようというときに参考にしたい、最新の良質ウェブデザインをまとめてご紹介します。

配色やレイアウト、フォント選び、トレンドなど優れた実サンプル例を見て、クリエイティブなデザインアイデアにつなげてみましょう。デザインの打ち合わせなどにもオススメしたいサイトが揃います。

>>Webデザイン、これからどうなる？すぐに使えるアイデア見本集58選
─情報元： PhotoshopVIPサイト様─

”自分たちにも優しい”デザインとは？

開発工数を増大させるデザイン

まず始めにジョブメドレーの求職者画面についてです。これは医療従事者向けの求人を探しているユーザー『求職者』のための画面で、求人の絞り込む検索、求人の詳細情報、職種の情報を発信するブログ、サービスのコンセプト紹介など多彩な情報で構成されています。

メドレーが運営しているサービスの中で最も歴史があり、求職者の希望に見合った求人をスマートに探すことができるように、リニューアルや機能拡充を繰り返しおこなってきました。おかげさまで毎年安定的な成長をとげています。

>>”自分たちにも優しい”デザインとは？
─情報元：Medley Developer Blogサイト様─

WordPressの代わりになる！2018年注目の静的サイトジェネレーター6選

WordPressを使って ブログサイトやホームページを作成しているひとは多いかもしれません。しかし、もしあなたにプログラミングの知識が多少なりともあって、 SEO上も有利にしたいのであれば、静的サイトジェネレーターを使ってみるのはいかがでしょうか。

静的サイトジェネレーターを使えば、 データベースが不要になり、一般的にページの読み込み速度も上がるとされています。汎用的に使えるものからシンプルに使えるものまで幅広く存在するので、用途にあったものが選べます。

そこで今回は、2018年に注目の静的サイトジェネレーターを、概要を中心にご紹介していきます。
サンプルコードなどは、参考として挙げているページをご覧ください。
>>WordPressの代わりになる！2018年注目の静的サイトジェネレーター6選
─情報元：ferret [フェレット]サイト様─

あなたは大丈夫？Webデザインが進化したからこそ「やってはいけない」5つのこと

Webサイトがレスポンシブ対応していたり、常に表示する必要のないメニューはハンバーガーメニューで隠したりと、業界で共有されているWebデザインの「あるべき姿」は、常に少しずつ進化しています。

その下支えになっているのが ブラウザ技術です。Webrageの調査によれば、Internet Explorerを超えて Google Chromeが国内外で圧倒的シェアを獲得していますが、 Google Chromeは6週間ごとに安定版がリリースされており、アップデートごとに ブラウザの技術も進化しています。結果的に、Webデザインでできる幅も広がるのです。

しかし、Webデザインでできることが多くなったからといって、必ずしもデザイン上のテクニックが ユーザー体験( UX)を向上させるとは限りません。

そこで今回は、Webデザインが進化したからこそ「やってはいけない」5つのことをまとめました。よかれと思って実装したものが、かえって ユーザー体験の足かせとなってしまっては元の木阿弥です。5つのチェック項目を確認してみてください。

>>あなたは大丈夫？Webデザインが進化したからこそ「やってはいけない」5つのこと
─情報元：ferret [フェレット]サイト様─

ECサイトにおいて「レスポンシブWebデザイン」では売れない３つの理由

●理由その1：
PCサイトとスマホサイトの構造を同じにしてしまうと階層が深くなりやすい

●理由その2：
PCサイトではSEOの観点からある程度テキストが必要だが
スマホサイトでは直感的に見せたいため、ボリュームのあるテキストは邪魔になる

●理由その3：
そもそもＰＣサイトとスマホサイトでは画面のサイズが違うので
共通デザインにするのは無理がある

>>ECサイトにおいて「レスポンシブWebデザイン」では売れない３つの理由
─情報元：ECのミカタサイト様─

あなたは大丈夫？Webデザインが進化したからこそ「やってはいけない」5つのこと

Webサイトがレスポンシブ対応していたり、常に表示する必要のないメニューはハンバーガーメニューで隠したりと、業界で共有されているWebデザインの「あるべき姿」は、常に少しずつ進化しています。

その下支えになっているのが ブラウザ技術です。Webrageの調査によれば、Internet Explorerを超えて Google Chromeが国内外で圧倒的シェアを獲得していますが、 Google Chromeは6週間ごとに安定版がリリースされており、アップデートごとに ブラウザの技術も進化しています。結果的に、Webデザインでできる幅も広がるのです。

しかし、Webデザインでできることが多くなったからといって、必ずしもデザイン上のテクニックが ユーザー体験( UX)を向上させるとは限りません。

そこで今回は、Webデザインが進化したからこそ「やってはいけない」5つのことをまとめました。よかれと思って実装したものが、かえって ユーザー体験の足かせとなってしまっては元の木阿弥です。5つのチェック項目を確認してみてください。

>>あなたは大丈夫？Webデザインが進化したからこそ「やってはいけない」5つのこと
─情報元：ferret [フェレット]サイト様─

web制作の自動化が進む！ 画像から自動コーディングする深層学習プログラムが公開

Web制作業界において、自動化ができそうでなかなか自動化できなかったのが、コーディング作業。HTMLは確固に構造化されているので、コーディングの多くは単純作業でしたが、これまで自動化の手段がなく、煩わしかったのが正直なところ。

そんななか1月に、画像のみからHTMLコードを自動生成するというプログラムとその解説が、Floydhubのブログ上で、公開されました。

こちらのプログラムは、pix2codeという論文とそのコードを参考につくられているとのことです。

まずは、気になるニューラルネットワークの出力結果をご覧ください。

250エポックだと、支離滅裂な文字列でしかありませんが……

>>web制作の自動化が進む！　画像から自動コーディングする深層学習プログラムが公開
─情報元：Ledge.ai（レッジエーアイ）サイト様─

CSSで「余白」を制してデザイナーに好かれよう

余白を制する者はデザインを制する
らしい。
いろいろとデザインの記事を読んでみても、やはり余白は大事と書かれています。
「余白 デザイン」でググってみても、記事がわんさか出てくるので、やはりデザインにおいて余白は大事みたいですね。

Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識
こちらはLIGの記事です。
これはデザイナー側が歩み寄ろうねという内容の話ですが、フロントエンド側も歩み寄ってもいいはずです。

最近はデザイナーがSketchでデザインし、フロントエンドがZeplinを見ながら実装するというのが主流になりつつあると思いますが、
それでも、デザインを学んできていないのにいきなり余白を気にしろと言われてもなかなか難しいですよね。

印刷物でしたら、デザイナーが作ったものがそのまま印刷されて配布されたり掲示されたりするので良いのですが、Webやアプリだとなかなかそうもいきません。

デザインが、フロントエンドに委ねられる時代になりました。

>>CSSで「余白」を制してデザイナーに好かれよう
─情報元： Qiitaイト様─

Google検索はもう信頼できない？ デマやまとめサイトとの向き合い方

先日、米国のテクノロジー系メディア「Verge」で大変興味深い記事がありました。記事タイトルは「It's time to stop trusting Google search already」。Google検索を信頼することをやめるときが既に来ている、と大変センセーショナルなタイトルです。これは2017年11月5日にテキサス州の教会で発生した銃乱射事件において、誤った情報を含む記事がGoogle検索の上位に来たことをきっかけにした記事でした。

>>Google検索はもう信頼できない？　デマやまとめサイトとの向き合い方 
─情報元：ITmedia NEWSサイト様─