ウェブデザイン

Webサイトの制作をしているなかで、XDでデザインを制作することは、最近ではスタンダードになってきた。私の身の回りでは、Photoshopでの制作よりもXDのほうが多いぐらいだ。 さて、そのなかでよく起こるトラブルの一つとして、デザインとHTMLのギャップが挙げられる。 具体的には、クライアントから「デザインで見たときは良い感じだったのに、コーディングしたページを見てみたら、なんだが画像とかテキストが大きくて見づらく感じる」というものだ。 いろいろな理由はあるが、おそらくは XD で作ったデザインを「プレ ...

ウェブサイト「Can't Unsee」では、ウェブサイトやアプリのUIについて、自分のレベルを測ることができる。 Can't Unsee A game where you need to pick the design that is most correct. Test your attention to details! UIパーツのデザインが次々に表示されるので、二択の中から正しいものを選んでいくのだ。 最初は非常にイージーで、パッと見ただけで「こっちが正解」とわかる。しかし問題が進むにつれて難易度 ...

Webサイトのパフォーマンス改善をしたい！1秒でも早くページが表示されるように、いろんな施策を実施したい！ けれども、すでに公開・運用しているサイトにテコ入れをするのが難しく、具体的なアクションにまでなかなか落とし込めない。そんな悩みもあるかと思います。 実際「パフォーマンス改善」というと、ページの構造そのものに手を入れることも少なくありません。一朝一夕でできるものではなく、それなりに工数と費用が必要になります。 しかしそんな中でも、比較的手軽で、しかも絶大な効果が期待できる改善策があります。 それが「画 ...

今回はWebP（ウェッピー）を使ったウェブサイト制作を進める上で、必要な手順や注意点についてまとめました。 Googleが開発した画像フォーマット「WebP（ウェッピー）」。 圧縮率が高いので、大きくてキレイな画質の画像でも、サイズがそこまで大きくならないで済むのが最大の特徴。ページの表示スピードに起因するため、SEO対策としてもぜひ取り入れたいですね。 また、PNGのように透過の画像を作ることも可能で、GIFのようなアニメーションにも対応。どこをとってもデメリットのない画像フォーマットとなっています。 ...

ウェブディレクターを何年やってきても、コケるときは大きくコケてしまうのが、デザインだ。 依頼した内容とできあがったデザインが違う。あるいは、クライアントが希望していたデザインと認識の齟齬がある。そういう失敗は何度も経験してきた。 絶対に失敗しない方法を私は知らない。が、お互いの意識をすり合わせて、失敗の確率を下げるための方法のいくつかは知っている。 そのひとつが、今回ご紹介する「デザインヒアリングシート」だ。お付き合いのほど、どうぞよろしく。 デザインヒアリングシート：テンプレート 今回私が作ったデザイン ...

XDでもフォントをアウトライン化することはできる。 アウトライン化したい文字を選択した状態でcommand8を押すだけだ。 どうしよう、この記事で言いたいことが終わってしまった。あとは「アウトラインとはなんぞや」という話がつづくだけなので、時間がある人だけお付き合いいただければと思う。

「美しく見える比率」というのが存在します。「黄金比（Golden Ratio）」が一番メジャーですが、その他にも「白金比（Platinum Ratio）」「白銀比（Silver Ratio）」「青銅比（Bronze Ratio）」などがあります。 手軽に美しい画像を作るときに非常に役立つ比率ですが、いかんせん計算が面倒くさい。「横を1,200pxにしたとき、黄金比なら、縦は何pxだ？」という問題がつきまといます。 そこでご紹介したいのが、各比率に合致した縦横の長さを計算してくれるウェブツール。数値を入力す ...

ウェブサイトの制作にあたっては、SVG形式の画像ファイルが必要になるケースも増えてきた。しかしぼくはPhotoshopやIllustratorを持っていないため、アプリを使って自作することができない。 そこで活用しているのが、PNGやJPEG形式の画像をSVG形式に変換してくれるウェブサービス「vectorizer」だ。 Online Image Vectorizer Online raster to vector converter. Convert your images (jpeg, jpg or ...

Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。 Excelを使って作った表のデザインをそのままWebで展開できたら、そんなに楽なことはありません。今日はそんな便利な小技をご紹介。 ちなみにNumbersを使った方法もご紹介していますので、こちらも合わせてご参考にどうぞ。 Numbersで作った表をウェブで使えるHTMLに書き出す方法 | あなたのスイッチを押すブログ Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。 Ma ...

Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。 Mac用のExcelソフト「Numbers」。これを使って作った表のデザインをそのままWebで展開できたら、そんなに楽なことはありません。今日はそんな便利な小技をご紹介。 ちなみにExcelを使った方法もご紹介していますので、合わせて参考にしてみてください。 Excelで作った表をウェブで使えるHTMLに書き出す方法 | あなたのスイッチを押すブログ Webページで表のデザインを組むのは意外と面倒。そんなときに便利 ...

ウェブサイトをネイティブアプリのような感覚で使える技術が注目を集めています。「PWA（プログレッシブウェブアプリ）」と呼ぶんですけど、使ったことありますか？ このPWAに対応したサイトでは、ページを表示する速度が劇的に早かったり、アプリのようなヌルヌルっとした使い心地で利用できたりと、ユーザーにとってメリットが多いのです。 PWAとネイティブアプリの動作比較ムービーです。左がPWAで、右がネイティブアプリ。PWAの方は、インストールに掛かる時間も少なく、実際の使用感もネイティブアプリと遜色ないことがわかり ...

プロの写真家が撮った写真を、無料で、クレジット表記も不要で使用できるとしたら、あなたは魅力を感じるでしょうか。 ブログで画像が必要になる私にとってはこれ以上ないほど贅沢な話なのですが、「Unsplash」というウェブサービスでなら実現できてしまうのです。

あなたのウェブサイト制作やデザイン制作できっと役に立つ！グラデーションサンプルを集めたサイト「WebGradients」をご紹介します。 関連リンク：Fresh Background Gradients | WebGradients.com

今日は主にウェブ担当者向けの内容を。 ウェブページのデザインやコーディングをチェックをしていると、こんなことを考えたりします。 「AとBの要素、ちょっとずれてる気がするんだけど、本当に直線位置にあるかな」とか、「このサイトのメインコンテンツ部分の横幅って何pxだろう？」とか。 サイト内・ページ内の要素の配置や長さを、目視だけで確認するには限界がありますよね。 そんなとき、Google Chrome の拡張機能「Page Ruler」を使えば、ウェブページ内の要素の “測る” ことができます。

ウェブページを見ていて、全角の数字と半角の数字が入り乱れているサイトを、たまに目にします。ブログの記事やニュースリリースもそうです。 世の中には全角と半角の違いなんて気にもとめないウェブ担当者が結構いるってことでしょうかね。 でも私は気になってしまう。というか、読んでいてとても気持ちが悪い。どちらかに統一して欲しいし、そういった記号や英数字は極力半角で表現するべきだと思うのです。

ブロガーでありつつWebの制作会社でディレクターをやっている私です。 ウェブディレクターとして業務をする上で、とても重宝しているウェブサイトがありますので、今日はそのサイトのご紹介。ウェブ担当者なら絶対に役立つ便利ツールが６つほどまとめられています。 そのサイトが「ルフトツールズ（LUFTTOOLS）」。 ルフトツールズ（LUFTTOOLS） web・ウェブ制作に役立つ便利ツール集 このサイトで使える便利ツールは、以下の6種類。 パスワード生成 .htpasswd ファイル作成 メールアドレス暗号化 文字 ...

ガラケー。またの名をフィーチャーフォン。いわゆるパカパッカケータイ。今の若い世代においては、その存在を知らない子どももいるのではないでしょうか。 しかし、私のような制作会社にてウェブサイトの制作をしていますと、未だに「ガラケーでの見た目も確認して欲しい」という要望をいただきます。件数はわずかですし、本当にたまーになのですが。 そんなとき、Google Chromeでなら擬似的にガラケーの見た目を再現できます。特別な拡張機能など入れずとも、ユーザーエージェン切り替えが可能なのです。 一度設定してしまえば、以 ...

私はブロガーでありながら、ウェブディレクターとしても活動をしています。 ウェブディレクターとして幅広い提案をするためには、様々なウェブサイトに触れることが重要。なので私は、コレクション感覚でウェブサイトのキャプチャを集めています。 そのキャプチャの保存場所として個人的にオススメしたいのが「Pinterest」。ボードを集めたウェブサイトをズラズラっと眺めるのが、結構楽しいんですよ。 bamka さんの Pinterest ボード「Website」をフォローしましょう。 もしあなたが「Pinterest」に ...

ウェブフォントにハマりすぎて、かなり泥沼化していたのですが…。この度ようやく1つのゴールに辿り着くことができました。 その結果が「Noto Sans CJK JP」の採用です。 しかしこのフォント、Webフォントとして使用するには些かサイズが大きすぎるのが問題。そのまま使ってはページの読込速度に大きく影響してしまいます。 そこで必要なのが、フォントの軽量化。具体的にはこれを「サブセット化」と言います。

以前書きましたが、パソコンに入っているほとんどのフォントは「プロポーショナルフォント」と言って、文字ごとに横幅が違っています。 これのせいで、つまりは文章の末尾が揃わないという現象が起こります。同じ文字数の行でも、末尾が揃わないので、縦のラインがガタガタになってしまう。 これが非常に気持ちが悪いので、個人的に好きではない。 これを解消するためには、「文字によって横幅が左右されない "等幅フォント" を使う」という方法があります。 しかしこれまた問題が。等幅フォントって種類が少なくて、良い具合で綺麗なフォン ...