カテゴリー: デザイン

デザインにおける余白の重要性

どうもこんにちは!Webデザイナーの衣笠です。

シーズに入社して、はや4ヶ月。
「仕事終わりのビールが美味しい」と思える日が来るなんて、大人になった…なんて思っています。

この4ヶ月間、実際の案件を通し先輩にフィードバックをもらうことで、デザインの考え方やノウハウなど、多くのことを学んできました。

タイポグラフィや配色など、デザインを構成する重要ポイントは様々ですが、今回はそのなかでも特に学びが多かった「余白の重要性」について書いてみたいと思います。

●余白とは?


「余白」というとその字から、「余った空白の部分」という認識をもたれるかも知れません。
しかしデザインにおける余白とは、デザインをする上で最終的に「余ったもの」ではなく、
デザインを行う最初の段階で設計し作り出すもの
といえます。

余白を上手く使うことで

  • ユーザビリティの向上
  • デザインの印象をつくる
    など、様々なメリットがあります。

制作物に適した余白を設計するためには、まずは余白の役割を知ることが大事です。

●余白の役割


・情報をグループ化する

f:id:seeds-std:20191111201906p:plain

余白を使うことで、コンテンツごとにまとまりを作り、情報を整理することができます。
コンテンツの内容を読む前でも、一目で同じ情報ということが、視覚的に分かります。

・文字の可読性を上げる

f:id:seeds-std:20191111201920p:plain

ユーザーにストレスを与えず、文章を読んでもらうために、文字周りの余白は大切です。
各要素間の余白(見出し、本文、テキストが入るボックス)のみならず、
文字間や行間なども、文字の可読性を上げる重要ポイントです。

・視線の誘導を行う

f:id:seeds-std:20191111201932p:plain

要素間の余白を調整することで、ユーザーの視線の動きをコントロールすることも可能です。
上の図においては、ユーザーの視線は左上から右下へと「Z」の字のように流れるように、余白の近接間を調整し、視線の流れを設計しています。

・ユーザーの行動を補助する(手順を示す)

f:id:seeds-std:20191111201946p:plain

重要なボタンの周囲には、余白を十分にとり他の要素を配置しないなど、目立たせたい要素を明確にすることで、ユーザーの行動を補助することも可能です。

余白を使用し、ユーザーが次に取るべき行動を分かりやすく提示することで、ユーザーの迷いをなくす・負荷のかからない設計を行えます。

・デザインの印象をつくる

余白の役割は、ユーザビリティの面だけでなく、デザインのビジュアルにも大きな影響を与えます。
まだ余白の感覚が掴めていない新人デザイナーは、余白を恐れて詰め込みがちなデザインをする傾向があるといいますが、余白を上手く取り入れることで、ゆったりとした高級感のあるデザインを作成することも可能です。

●余白は大事!


余白において一番大切な役割は、「ユーザビリティの向上」です。

  • 情報整理がされておらず、文字も読みづらい
  • 伝えたいことがひと目で明確に分からない

このようなデザインでは、どんなに良いコンテンツが掲載されていても、ユーザーには届きません。

「余白」が重要なのは、デザイン全般的に言えることですが、Webデザインだとその重要性がより顕著に現れると思います。
ユーザーはサイトをくまなくチェックするわけではなく、
「このサイトに自分が求めている情報はあるか?」と、情報を流し読みしています。

ユーザーの求める情報を掲載していたとしても、それが目に留まらず、
「自分の求めている情報が載っているか分からない」と判断されてしまうと、
サイトから離脱(→他のサイトに移る)となってしまいます。

明確に情報を提示し、ユーザーの視線を導くために、余白は大きな役割を果たします

●まとめ


以上、今回は「デザインにおける余白の重要性」というテーマでお送りいたしました。

デザイナーとしてレベルアップしていくためには、余白の使い方をマスターする必要がありそうですね!
より良いデザインができるように、日々精進していきたいと思います!

slackに学ぶ、デザインシステムを作る重要性

こんにちは。デザイナーの河野です。

突然ですが、「デザインシステム」ってご存知ですか?

先日、Slackのデザイナーによって下記のような記事が公開されていました。
slack.engineering

slackは長らくユーザーの満足度を最優先でサービスを展開していましたが、
デザインはその時々の問題解決を優先で対応していたため、
結果、デザインに一貫性がなくなっていたり矛盾点が生じていたようです。
(スケールは全然違いますが、似たような体験をしたことが。あるあるですね。)

それを今回、時間をかけてコンポーネントからUIの見直しなど一から再構築し
デザイナー、エンジニアみんなが使える「Slack Kit」という
デザインシステムが出来上がったよ、という内容の記事になります。

f:id:seeds-std:20190924122735p:plain
引用:The Gradual Design System: How We Built Slack Kit


シーズの今までのデザイン体制

私はここ1年半ほど、ほぼ1人でデザイン業務を担当していたので
全く意識していなかったのですが、
新しく入ったデザイナーに既存のサイトの一部業務の引き継ぎをする時に
どうもイメージや認識の違いを覚えるようになり、
今までルールが自己で完結していたなぁ…と、その重要性を痛感しました。

デザインは複数人が行うと、バラつきやぶれが発生してしまいがちです。
同じサービス内なのにボタンやバナーのディティールや
使っている色、余白にバラつきがあったら
一貫性がなくなり、おのずとサービスとしての質も下がって見えてしまいますね。
またエンジニアへのコミュニケーションコストなども考えると大きな損失になります。
結果、会社全体の生産性の話にも繋がってきます。

デザインシステムを作るメリット

こんな時、デザインシステムを予めしっかり作っておくと、
今後また新しいチームメンバーが参加しても
それまでのルールに乗っ取ったデザインができるようになります。

また、どのようにデザインすべきかが明示されているので、
極論、デザイナーでない人もデザインできるようなります(!)
例えばちょっとしたアラートを出すとか、バナーを追加するとなった時は
コーダーやフロントエンジニアが直接作ってしまうというのも可能なわけです。

実はシーズのフロントエンドエンジニアチームでは、すでに似たようなものが導入されていて、
リーダーのNさん(あだ名:師匠)によって
コーディングガイドサイトのようなものが社内向けで共有されています。

f:id:seeds-std:20190924122752p:plain
中身はナイショでございます。


デザインシステムに入れると良い要素とは?

ということで、うちもデザインシステム作ろうじゃないの!
と、早速PCに向かったはいいものの、
具体的に何を作ればいいんだっけ・・
と、路頭に迷ったので、まずは色々と調べてみました。

①カラー

f:id:seeds-std:20190924131222p:plain

コーポレートカラーやブランドカラーといった意匠的なところから、
アプリやサービスなどの場合はBootstrapのカラーユーティリティーのような
状況に応じたルールも必要になります。
色は配色バランスによって印象が大きく変わりますので、
「この色は画面全体の●●%まで」と割合も決めた方が良いかもしれません。

②各種コンポーネントなど

f:id:seeds-std:20190924145220p:plain
色に続いて、これはエンジニアの作業と紐付けやすいと思います。
各種ボタンなどデザインパーツ、統一されてないと非常にモヤモヤしますよね。。(職業病)
Sketchの場合symbolを使用すれば解決する話でもあります。

③余白

f:id:seeds-std:20190924145230p:plain
これ、盲点ですね。
例えば既存のサイトで新しいセクションやページを追加するとなった時、
別のデザイナーに依頼したらmarginが違う…とかありそうですよね。

④レイヤーの命名規則

f:id:seeds-std:20190924161419g:plain
作業中のレイヤーって気づくと混沌とした世界になっている事がありますね。。
これも共通ルールなど徹底すると、エンジニアの作業も楽になるのではないでしょうか?

⑤テキスト

f:id:seeds-std:20190924145251p:plain
これもルール化しておけば良かった…と後悔したものの上位になります。
何も指定していないと100%デザイナーによって変わります。
フォント、行間、サイズ、行揃えなどなど、ただのテキストでも留意点がたくさんありますね。

⑥ページレイアウト

f:id:seeds-std:20190924145325p:plain
例えば、一口にレスポンシブデザインと言っても、
リキッドなのかフレキシブルなのかで作業ボリュームが全然違います。
対応端末は何パターンか、ブレイクポイントはいくつか、など
段階別に何パターンかルールを分けておくと良いかもしれないです。


<おまけ>著名な企業のデザインシステムの実例

最後に、著名な企業のデザインシステムをご紹介します。
近頃では、デザインシステムをただの社内用のルールとしてではなく、
ブランディングの一環として公表している会社が結構あることが分かりました。

Atlassian

f:id:seeds-std:20190924123201p:plain
エンジニアの皆さんご存知のAtlassianです。
なんとデザインシステムを作る前は同じドロップダウンのパーツなのに45種類の異なるデザインがあったとか。。

Airbnb

f:id:seeds-std:20190924123203p:plain
創業者がデザイナーということもあってか、ブランディングの徹底ぶりが半端ない Airbnb。
2018年にオリジナルフォントを出したことも記憶に新しいです。

Uber

f:id:seeds-std:20190924123208p:plain
Uberは2018年にリブランディングを行いました。
それについて詳しく書かれています。
一見自由な線のイラストもGridに沿って作成されていて、その仕事の精密さに感動すら覚えます。

Salesforce

f:id:seeds-std:20190924123211p:plain
最後にBtoB企業も紹介します。Salesforceは「Lightning」と言うデザインシステムを公開しています。
「分かりやすさ」「効率性」「一貫性」「美しさ」をデザイン原則として作られています。

まとめ

調べるほど奥が深いデザインシステム。
まさかこうやってネット上に公表している組織があることが少し驚きでした。

また、デザイナーはセンスや感性が命!と思われている人も多いかもしれないですが、
こういった理念に基づいた細やかなルールを守り、
効率的にプロダクトの品質を守っていくというのも大事な仕事なんですね。

シーズは現在デザイナーは2名しかいないですが、
いつかメンバーが入れ替わったり大きな組織になった時、
未来のデザイナーが困らないよう、ちょっとずつ頑張っていきたいものです。

P5.sketchpluginを使ってビジュアルプログラミングを学ぶ[超初級編]

こんにちは。WEB事業部デザイナーの河野です。

いつものように趣味でPinterestとTumblrの徘徊をしていると、
めちゃくちゃクールでかっこいいグラフィックを見つけました。

「これどうやってできているんだろう」と辿ってみるとそこには「processing」という言葉が。。

恥ずかしながら今までその言葉を聞いたことがある程度で実態を分かっていませんでした。
processingとはビジュアルデザインのためのプログラミング言語のことで初心者でも比較的始めやすいとのこと。

初心者でも始めやすいとはいえ、されど「プログラミング」。
もともと自分は紙媒体のグラフィックデザイナー出身で、
黒い画面とコードを見ただけで頭痛と鳥肌、冷や汗が全身の毛穴から噴き出るほどの拒絶反応がありました。
(よくWEBデザイナーになれたものだ…。シーズの採用陣、器が広い!)

しかし!
色々調べていくとp5.jsというProcessingをJavaScriptで書けるライブラリを
WEBデザインツールのSketchで再現できるプラグインがあることがわかりました。

その名も「P5.sketchplugin」というプラグインです。
www.jacopocolo.com

Sketchだったら睡眠時間よりも長い時間毎日触っているツールなので
やりやすいかもしれない!と、早速使ってみました。

使ってみたらビックリ。

前述の通りプログラミングが全くわからない自分でも
ビジュアルプログラミングを体形的に学べつつ、デザインツールとしても便利だったのです!

ということで、今回は「P5.sketchplugin」をご紹介します。

まずはインストール

1. ここから最新バージョンをダウンロード

2. zipファイルを解凍してプラグインをインストール。

3. Sketchを起動してメニューにPlugins > p5が表示されたらインストール完了です。

f:id:seeds-std:20190913173424p:plain
インストールできた状態

基本:簡単なグラフを作成する

無事インストールできたら、早速触ってみます。
Plugins > p5 > Edit and runを選択してプラグインを立ち上げます。

f:id:seeds-std:20190913173527p:plain
プラグインを立ち上げました!

最初は何も表示されていませんが、ここにコードを入力しPlay(実行)でアートボードに反映されます。

早速プリセットのデータを見てみましょう。

[Presets]のプルダウンメニューから[Pie chart]を選択して実行すると、、

f:id:seeds-std:20190913173651p:plain
円グラフができました!

コード部分の下記の数値を編集して実行すると円グラフに反映されます。

var percentages = [30,60,10];

f:id:seeds-std:20190913174108p:plain
編集してみました

他にもプリセットには棒グラフも用意されています。
管理画面のUIデザインなどで役立ちそうですね。

実践:コードを編集してモザイクパターンを作成する

ここからは応用で、パターンを作ってみたいと思います。
[Presets]の中から[Generative grid]を選択します。

f:id:seeds-std:20190913180011p:plain

これを元に、アートボードのサイズ、色、円の表示の確率などなど、
各種設定していくとモザイク模様ができます!

試しにシーズのみんなが大好きなRedBullカラーのモザイクを作ってみました。

f:id:seeds-std:20190913182648p:plain
Redbullカラーモザイク

上にテキストを乗せたりと、バナーやアイキャッチ画像制作にいろいろと応用できそうです。
f:id:seeds-std:20190913183035p:plain

今まで視界に入ると拒否反応が出ていた数字や関数たちも、
「ここを動かすための記述なのか!」と理解できれば慣れてくるものだということが分かりました。
これから仲良くなっていきたいです。

注意すべきこと

  • あくまでも表現できるのは静止画のみ(Sketchの競合、Figmaはアニメーション表現も可能らしい。。)
  • 制約が多いのでリファレンスを読んだ上で操作すると良いかも。
  • Sketchでグラフィックを編集してしまうと、コードには反映されないので注意。

まとめ

普段デザイン業務しかしていないので、数値をいじるだけでビジュアルが変化するということがそもそも新鮮でした。
これがビジュアルプログラミング・・!
長らくコード大嫌いデザイナーでしたが、
これを機にprocessingを本気で勉強してみようと思います!

次回(未定)、初級編で簡単な図形を自分で作ってみたいと思います!
それではまた。

弊社コーポレートサイトリニューアルとその裏側

お久しぶりとなってしまいました。原口です。

10/1に弊社コーポレートサイトがリニューアルされました。

www.seeds-std.co.jp

今回、社長より「技術的な部分は自由にやっていいよ」という事でしたので自由にやらせていただきましたので、
このサイトにおける技術的な部分にフォーカスして紹介をしていきたいと思います。

システムコンセプト

通常コーポレートサイトといいますとwordpressなどのCMSの導入をする事がほとんどです。
弊社でもこれまではwordpressを利用していましたが運用するうちに気づいた事として管理が非常に面倒という点がありました。
サイトの更新よりもwordpressのアップグレード回数の方が多かった・・・となる月もザラにあり、
更新の簡単さと差し引いても目に見えにくい人的コストが高い状態は否めませんでした。

そのため、リニューアルにあたっては早いうちから、管理コストの少ない構成とする事は決めていました。
できる限り静的ファイルのみでの公開をし、お問い合わせフォームなどの、どうしてもプログラムの必要な部分は
サーバーレスアーキテクチャを採用するという方針を決定致しました。

バックエンド

インフラ構成は以下の通りです

f:id:cs_sonar:20181009211159p:plain

サイトの大部分はs3で公開されています。
デプロイは開発者のローカル環境より

npm run prod

といったビルドコマンドでs3に同期するような仕組みです。

大部分はs3で公開されている為、s3は静的ホスティングとしています。
前段にcloudfrontをかませていますが、これは独自ドメインにてSSLを使いたかったが為に使用しています。
そのためキャッシュ及びネガティブキャッシュのTTLは0です。
SSLはACMで取得しました。

唯一お問い合わせフォームがシステムに絡む部分となりますので
こちらはAPI gatewayとlambdaを利用しています。
この部分は一括して、リードプログラマの川勝さんに担当していただけました。

lambdaはvalidateと、SMTP-AUTHにて別のサーバーにメールリレーするだけの簡単なプログラムとなっています。
サーバレスといいつつ、唯一メールサーバーのみ弊社データセンタを利用していますが、
こちらも本来はAWS SESを利用しても問題はないかと思います。

この構成で約10日間ほど運用していますが現在で総額 $1.5ほどの費用となります。
TOPページに動画を使っている関係かこのうちの$1.2は転送量(cloudfront)です。
このままでおおよそ$5/monthほどのコストで運用できるのではないでしょうか。

この低コストに加えて、サーバー機の保守やOS、ミドルウェア、アプリケーションの脆弱性など、
まったく考えなくてもよいという見えない人的コストも大きく削減されています。

フロントエンド

フロントエンド側では弊社フロントチームに新卒で参加した寺澤さんがコーディングから実装までほぼすべてを行いました。
モバイルファーストを考え、スマフォの際はできるだけ転送量がかからないようjsやcssをminifyを行ったり、モバイル端末の際はTOP動画をgifアニメにするなどの変更を行っています。PC側の動画の圧縮なども作業いただきました。

静的ファイルを生成するという構成上、テンプレートエンジンの利用は当初より考えていてPugを使用しています。
ビルドはgulpを利用していて、ビルド時のコマンドで生成したhtml、css、画像、jsをs3へ持っていく形としています。

jsフレームワークはVue.jsです。スライダーやページの動きはこちらで実装し、一部ページ(newsや制作実績、お問い合わせページ)ではSPAっぽいもので構成しています。

1点、起こった問題として、s3静的サイトホスティングではmod_rewriteのようにURLの書き換えができない点がありました。
リダイレクトは可能なのですがリライトはできないのですね・・・。
前述の通り一部ページはSPAでの実装を行っていたのですが、
s3での運用に際し、この点はURLが少し不格好となってしまいますがクエリストリングで対応するようにしました。

デザイン

昨年、弊社に入社されたデザイナーの河野さんが全て取り仕切って行ってくれました。
モバイルファーストと呼ばれるこの時代・・・レスポンシブデザインをベースに
スマフォでいかに見やすいか、という点を注意してデザインいただけました。

TOPにて背景動画を流したり、遊び心のあるイラスト(河野さんの自作!)など、素敵なデザインになったと思います。
イラストの一部にシーズ社員数名が紛れ込んでいるので、是非探してみてください。

終わりに

今回の構成では今後できるだけ手間をかけない、可能な限り今後の運用が低コストとなるよう考えて制作しました。
通常CMSと考えるとwordpressやサーバー、そしてデータベースの準備などなど、、、様々な事がデファクトスタンダードとして存在しますが、
規模に対して過剰な設備であったり、本来注視すべきコンテンツ以上にこれらの対応で時間が取られる事もしばしばあります。
本当にそこまで必要なのか?本当にそれらを準備しないと目的が達成できないのか?
という観点は通常のシステム開発でもとても重要なものであると改めて思いました。

同様の事例でお困りの事があれば是非、ご相談下さい!

Tableの使用に際して

今回は、有名なCSSフレームワーク「Bootstrap」を使用した際に、個人的に発見のあった<table>の使用について書きます。

HTMLで<table>とは

自分がコーディングに興味を持ち始めたころは、「テーブル=食卓」のイメージがあり、「table=表」に違和感がありました。
また、コーディングを勉強し始めたころは、ゴリゴリとテーブルレイアウトでページを作成していたこともあります。
が、<table>とは、食卓ではなく、Webページのレイアウトをするモノでもなく、情報を伝わりやすくするためなどに
「表」を実現するタグです。

<table>は優秀

<table>は表の一つの列のセルの幅を内容に合わせて統一し調整してくれて優秀です!
また、ウィンドウを縮めたり、内容のテキストが長い場合は自動で折り返してくれたりもします。
もちろんCSSで横、縦幅、罫線、テキスト位置などが調整できるので、デザインも自由に表現することが出来ます。

スマホでの<table>

しかし、そんなテーブルにも使用する上で問題がありました。
従来のPCの画面サイズで見ときは可読性に問題なく表示されている状態だったとしても、スマホなどの小さな画面サイズで
確認すると、テーブルの項目数が多く表示されてしまったりテキストの自動折り返しの影響でテキストがほぼ縦書きのような
状態になってしまうという問題が起こります。
また、それを回避しようとCSSの設定(折り返して表示させないなど)の親の幅を無視すると、思わぬデザイン崩れが起こって
しまうことがあります。
課題として、そういったケースをどう表現するのが賢明なのかが悩みどころでした。

Bootstrapでの仕様

そこで冒頭に書きましたが、Bootstrapという有名なCSSフレームワークを使うことがあり、確認してみたところ、

<div class="table-responsive">
<table class="table">
...
</table>
</div>

と記述することで、一定幅以下の場合にはテーブルの親のCSSに”overflow-x: scroll;”が適用され、スクロールしてテーブルを
確認することが出来るようになるという仕様でした。
この方法だと、可読性を損なうことなくスマホでテーブルの実装を行うことができる!すごい!と、目からウロコでした。

まとめ

世の中には様々な技術があり、常日頃から学ぶ意識を持ち調べることが大切だと改めて実感しました。

CSSの個別性について

私はフロントエンドとして日々業務に追われています。
基本的には個人での作業なのですが、共同でコーディング作業を行うということもあります。
その場合、作業の規則を設けていないと、つまずくことがあります。

CSSファイルに定義しているのに効かない

プロパティを間違えているわけでもなく、見直しても問題ないのに機能しない…ということが稀にあります。

そういった場合には、諸々思わぬ原因が潜んでいるやもしれません。

個別性

CSSを適用する場合、様々な記述方法があり、それにより優先されるスタイルが変わります。

div {color: #000;}
div {color: #F00;}

ごく単純に上記のように書くと、基本的には後に記述された「color: #f00;」が優先され適用されます。

しかし、下記のように記述すると

div.text {color: #000;}
.text {color: #F00;}

後から記述されたスタイルではなく、上の「color: #000;」が優先されます。

こうなる理由は、セレクタには個別性というものが決められており、
その個別性を計算し、優先されるスタイルが適用されるからです。

個別性の計算

セレクタにはidやclassなどを様々に設定し、適用させることができます。
そして、セレクタには個別性の優先度があり、それを計算した上でスタイルが適用されます。

計算の値をまとめると下記の通りです。

  • タグに直接style属性がある場合は、1000
  • idセレクタは、100
  • id以外の属性と、擬似クラスは、10
  • 要素、擬似要素は、1

これを値を基に下記のコードを考えると、

div.text {color: #000;}
div {color: #F00;}
  • 「div.text」: 1 + 10 = 11
  • 「.text」: 10

となるので、先に記述された「color: #000;」が優先され適用されます。

まとめ

個別性については、キチンと把握するには計算の値も覚えておくべきなのかもしれませんが
上記のように、最初に作業チーム内でCSSの記述ルールを設けておけば
そこまで気にしなくても思った通りのデザインにできると思います。
もし、CSSに記述したスタイルが効かないという状況があれば、今回の記事が解決に繋がるかもしれません。

追記

今回この記事を書くに至ったのは、自分の備忘録というのもあるのですが、
業務でどうしてもスタイルが効かないという状態に陥ったからです。
ですがその原因は、無理やりスタイルを適用させるため、
ほぼ全てに”!important”が付けられていたというオチで、個別性とかは関係ありませんでした…
楽ではあるのですが、”!important”は個別性など関係なく最優先されるので、
多用するのもよろしくないなと思いました。

(明日はバレンタインということで)イラレでハートを書いてみましょう!

明日はバレンタインデーということで、今頃メッセージカードにハートを描いてる方が多いのではないでしょうか?

イラレでハートを描くのって、案外難しかったりします。
でもコツを覚えれば、ホントは簡単!

ポイントは、「ハートを描くのではなく、ハート形の図形を作る」ということです。
今回は、丸みのある柔らかいイメージのハートを作ってみましょう。

描くのではなく、つくる

ベースとなる図形を作る

まずはベースとなる図形を作ります。
今回は、丸みのある柔らかいイメージなので、楕円形ツールを選択し、

楕円形ツールを選択

適当な大きさの正円を作ります。


それから、ダイレクト選択ツールで下側のパスを選択し、


適当なサイズに伸ばします。

これでベースとなる図形ができました。

複製して配置する

つぎは、ハートのくぼみ(こぶの部分)を作っていきます。

回転ツールを選択し
-90度回転させて複製します。
(OKボタンではなく、コピーボタンをクリック)


そして オブジェクト>変形>移動 で水平、垂直ともに同じ数値を入力し、-45度に複製移動させます。
このとき、プレビューでチェックしながら、きれいなこぶになるように調整しましょう。
今回は、5pxに移動させてみました。
(OKボタンではなく、コピーボタンをクリック)

それから、2つの図形をグループ化し、
回転ツールで45度回転させます。


やっとハートが見えてきましたね。
あとは、不要な部分を切り取るだけです。

シェイプ形成ツールで整える

不要な部分を切り取るには色々な方法がありますが、
今回は、便利なシェイプ形成ツールを使用します。

シェイプ形成ツールを選択し

まずは、必要な部分をドラックします。

すると、一発でパスが結合されました。

逆に、不要な部分に対しては、
「optionキー」を押しながらドラッグすると、
削除してくれます。

どうですか?こんなに簡単に作れちゃいました。

これでハートを描くよりもメッセージを書く方に時間をかけられますよ。
それでは皆さん、チョコよりも甘い一日を!

ブラウザがIDとPasswordを自動入力してくるのを防ぐ

知らなかったので備忘録。

基本的なブラウザはhtmlのフォームにてinput type=”password” があり、
そこに入力された場合にその値をパスワード、
そしてその上にある input type=”text”の値をIDとしてデータを保存し、
次回のログイン時などに自動的に挿入してくれる。

これは大変便利な機能なんですが、
例えば、パスワードを変更するようなページの場合、
自動挿入されてしまうと都合が悪い状態になってしまいます。

この「ブラウザに保存されたパスワード」を自動で挿入させないようにする為に
以下のようなオプションが用意されています。

[code]
autocomplete=”{on|off}”
[/code]

デフォルトではonとして動作するようなので、以下のように設定。
[code]
<input type=”password” name=”password”>

<input type=”password” name=”password” autocomplete=”off”>
[/code]

これでパスワードは自動入力されなくなります。

Aiで画像を書き出すTips ~準備編~

デザイナーさんからデータがAiで来た時、みなさんはどうしてますか?

Photoshopで作業?
それでもいいのですが、
私は、Illstrator大好き人間なので、そのままAiで作業しちゃいます。

その際に困らないようにTipsをmemoしておきます。
今回は準備編です。

AiをWEB用に設定しちゃいましょう!

※今回はwin/cs5の環境でお届けします。

STEP1 : 環境設定 -> 単位

ai01

環境設定から「単位」を選びましょう。

STEP2 : 有無を言わさず「ピクセル」に

ai02

「単位」を全部「ピクセル」にしちゃいましょう。
AiをWEB制作以外で使う人は、ちゃんとその都度変えた方がいいと思います。。。!

STEP3 : 止めの「ピクセルビュー」

WEBはピクセル命。Aiもピクセル視点にしましょう。

こうなります。

 ※クリック推奨
(シーズマガジン9月号の時に作成した素材です)

ピクセルビューをON・OFFにするだけでこんなにもAiの世界は違うんです。

どうしてピクセルにするの?

WEBはピクセルの世界だから

コンピュータにおける画像形式は、「ベクタ形式」と「ラスタ形式」の2つが代表的です。
Aiの表示は「ベクタ形式」なので、線やパスがキレイに表示され、
WEBサイトやビットマップ画像と呼ばれるものは「ラスタ形式」によって、ピクセル単位で表示されます。

…ということは通常のAiの表示形式だと、WEBデザインをする上でふさわしくない環境だと言えます。

なので、AiでWEBデザインないし画像の書き出しをする際には、
先に紹介した説明を見て、最初からピクセルの世界でモノゴトを見れるようにしておきましょう。

そうすれば、今後の作業効率もあがりますし、コーダーさんや自分自身が画像を書き出す際にも
「データの時より書き出した画像が汚い!どうしてこの画像切れてるの?!」
みたいなこともなくなる…はずです。

次回は書き出し編

をお届けしていこうと思います。
応用としてスライス編も出来ればいいなと思っています。
今回のTipsが今後の制作のお役にたてると幸いです^0^

HTMLのコードからCSSセレクタを自動出力してくれるジェネレーター

CSSセレクタの入力って、結構面倒ですよね。

私の場合、これまでは、まずHTMLコードをコピーしてCSSファイルに張りつけ、そしてそのコードの中から必要なセレクタを残していくという作業を行っていました。

この方法が、タイピングに自信のない私ににはピッタリで、かつタイプミスによってスタイルが効かないなどのトラブルも起こりにくい方法だと思っていたのですが、もっといい方法を見つけました。

知っている方も多いかもしれませんが、便利なのでご紹介。

 

CSS Selector Generator

 

使い方は簡単で、

 

Step1: まずは、HTMLのコードをまるごとテキストエリアに貼付けます。

 

Step2: つぎに、文字コードや、あらかじめ除外しておきたい要素などを設定して、「CSSを出力」ボタンを押すだけ。

 

Step3: あとは、出力されたコードをありがたくコピーさせていただきます。

 

CSSファイルに貼付けたあとは、Zen-codingなどで楽しくマークアップしちゃいましょう。
作業効率アップ間違いなしの「CSS Selector Generator」。ホントお世話になってます。

© SEEDS Co.,Ltd.