schema.orgを設定してクリック率UP!JSON-LDでの記述方法の基本

こんにちは。デザイナーの野中です。 みなさんは、あるレストランの名前を検索したときに、検索画面の右側にそのお店の営業時間や、住所、地図などの情報が表示されているのを見たことがありませんか。 検索結果に出てきたサイトのタイトル下に、レストラン…

こんにちは。デザイナーの酒井です。新年度が始まって一ヶ月が経ちました。そろそろ新しい生活にも慣れてきて少しだけ余裕を持てているのではないでしょうか。今回はデザイナーを目指す学生が社会に出る前に学ぶべきことを新卒目線で紹介できたらと思います…

こんにちは。デザイナーの宮下です。新年度が始まり、半月ほどが経ちました。新社会人としてまだまだ慣れないことが多々あると思います。今回は、デザインの仕事をする上で欠かせないMacでのパソコン作業をより迅速にするショートカットキーをご紹介します。…

2018 Webデザイントレンド予想 10選

こんにちは。デザイナーの野中です。 2017年は、グラデーションカラーの使用やアニメーション、インタラクションの導入などがWebサイトデザイン上で一般的に浸透しました。常に進化を続けるWebデザインですが、2018年はどういったデザインがトレンドとなるで…

簡単なタブ切り替え機能の実装

ページ遷移や、スクロールでの大きな操作がいらないタブ切り替えコンテンツ。多くの情報を掲載する場合などに便利な機能で、Webページでよく見かけるかと思います。使いやすいプラグインなどももちろんありますがタブ切り替えは、CSSとJSの制御、もしくはCSS…

アニメーションのきれいなWebサイト10選

こんにちは。デザイナーの寺田です。Webサイトにおいて、アニメーションの効果はサイトのイメージ向上や平面では表現できない印象をユーザーに届けます。Webサイトの制作において、エンジニアとデザイナーの意識の合わせ方や調整の仕方など工夫が必要かと思…

年賀状作成時のマナーとデザイン

こんにちは。デザイナーの那須です。12月になり、年の瀬が近づいてきました。 みなさんは、もう年賀状の準備を始めていますか?新年にポストに年賀状が届き、相手が自分のことを考えて送ってくれたのだと思うと、嬉しいものです。 しかし、いざ送るとなると…

外国人にもわかりやすいWebサイトデザイン

こんにちは、デザイナーの野中です。秋もすっかり深まり、紅葉シーズンで観光には絶好の時期ですね。みなさんも街中で外国人観光客の姿を見かける機会が多いのではないでしょうか。 日本政府観光局(JNTO)によると、2017年8月の訪日外国人数247万8千人に登…

クリスマスに取り入れたいデザインのポイント

こんにちは。デザイナーの箱石です。ハロウィンが終わり、街はクリスマスの色合いになってきました。 今回は、これから増えてくる「クリスマスのデザイン」の要素を、実例と共にご紹介します。 ※紹介する事例の引用元サイトは、季節性のあるキャンペーンサイ…

新しくなったGithub Desktopを使ってみよう

Github Desktopのアプリが新しくなりました。Github Desktopはソースやファイルのバージョン管理を行うGithubの機能を、コマンドを使わずグラフィカルユーザインターフェースで行える公式に配布されているアプリケーションです。以前TIPSでも紹介しています…

高齢の方向けウェブサイトデザイン 8つのポイント

こんにちは。デザイナーの那須です。最近は、ご高齢でもパソコンやスマートフォンでインターネット(※)を利用する方が増えていますね。総務省によると、2016年には60歳以上の方の約60%、60~64歳の方に限定すると80%以上が、インターネットを利用していま…

UI向上に必須。マイクロインタラクション10選

こんにちは。デザイナーの寺田です。TIPS vol.59で「WebライティングでUIデザインの品質を高める」をご紹介しました。今回は、ライティングとともにWebサイトの品質を高めるために、ぜひこだわりたい、マイクロインタラクションについてご紹介します。Google…

gulpを使って ファイルの徹底効率化をはかる

HTMLでサイトを構築するとき、デザインや見栄え等をチェックすることはもちろんですが、成果物をより良くするために、ソースやファイルにチューニングを加えることがあります。HTML、CSSのソースコード見直しや、整理、画像のファイル圧縮やHTMLのバリデーシ…

秋を感じさせるデザインのポイント

こんにちは。デザイナーの那須です。 9月に入り、秋を感じる涼しい日も増えました。 今回は、これから増えてくる「秋らしいデザイン」の要素を、実例と共にご紹介します。※紹介する事例の引用元サイトは、季節性のあるキャンペーンサイトも含まれており、一…

線や塗りなど描画が美しいSVGアニメーションの作り方

ロゴやアイコンなどをWebサイトで拡大・縮小しても劣化させたくない場合に使用されるSVG画像。SVGには、gifのように画像をアニメーションさせることができます。gifや動画などと違い、ベクター形式であるSVG特有の滑らかな動きを表現できます。 今回は、XML…

Google AdWords 管理画面
 リニューアル版を試してみよう

2017年8月ごろからAdWordsの管理画面リニューアル版が公開され、新しいデザインにて使用できるようになりました。 グラフが増えたり知りたい情報が大きくなっていたり、トップ画面をみるだけでも視覚的なデザイン・レイアウトになったことがわかります。 見…

構造化データをお手軽に データハイライターを使ってみよう

検索エンジンの最適化において、SEOの対策は欠かせないものとなっています。 サイト集客の方法はスマートフォンの普及、SNSの一般化など様々な要因から多様化しています。 最新の傾向としてはデータ最適化をするだけでは十分とはいえず、コンテンツの内容・…

vol.73 3DソフトBlender入門

こんにちは。デザイナーの寺田です。 デザインの表現で3Dによるものが、一般的になってきました。 以前、Photoshopによる3D MODELING「を紹介しましたが、 今回は「Blender」による3Dモデリングの作成方法をご紹介します。 そもそもBlenderとは? Blenderは…

vol.72 夏を感じさせるデザインのポイント10選

こんにちは。デザイナーの野中です。7月も後半に入り、今年も夏本番の季節になりました。今回の記事では、この季節に多く目にする夏を感じさせるグラフィックデザインの要素とは何か、実際の事例をまじえながらご紹介します。 ※紹介する事例の引用元サイトは…

vol.71 srcsetで画像をレスポンシブやRetinaディスプレイに最適化

こんにちは、Webエンジニアの佐藤です。Web上で、ウィンドウサイズが変わった場合やRetinaディスプレイなどの高解像度の場合、その状況に対応した画像に自由に切り替えることができるsrcset。今回は、画面解像度やウィンドウサイズによって最適な画像に切り…

vol.70 映画にみる色使いのこだわり

みなさんは映画をよくご覧になりますか?チケット代が高い、映画選びを失敗したくないなどありますが、TVドラマとは違い、監督の色・こだわりがよく見えるのは映画のよいところだと思っています。 今回は数多ある映画の中で色彩が印象深いものをセレクトしま…

vol.69 2017年度版 Webデザイン・UIのトレンド10選

こんにちは。デザイナーの野中です。 6月も今日で終わり、早くも2017年の後半が始まりました。 Webの世界では、2016年はユーザーの操作にさりげなく感覚的に応えるマイクロインタラクションや、動画を全画面に採用したWebサイトが主流になり、目で見るだけで…

vol.68 常時SSL化のススメ Let's EncryptでWebサイトを暗号化

モバイルを中心にインターネットに接続できる機器の飛躍的な増加により、多くの人がインターネットから情報を取得するようになりました。 利用者母数の圧倒的増加によって、ユーザーを狙った悪意ある攻撃などが激化する中、それらの攻撃からユーザーを保護す…

東京オリンピックで活躍。 ピクトグラムについて。

こんにちは。デザイナーの寺田です。みなさんは、はじめて来たデパートで、トイレに行きたくなったとき どうやってトイレを見つけますか。 また、海外旅行で国外のデパートだったらどうするでしょうか。店員さんに聞くこともあると思います。天井に吊るされ…

vol.66 Flexboxの仕様と柔軟なボックスレイアウト

こんにちは、Webエンジニアの佐藤です。Webサイトのコーディングで常に頭を悩ませているのが、上下中央揃えや、要素の高さを合わせるなどのボックスレイアウト。単純そうにみえて一筋縄ではいかなかったレイアウトを「Flexbox」の導入で解決しようという方が…

vol.65 オフィスで使う印刷紙 企画書に最適な用紙とは!?

みなさんはオフィスで印刷するとき、どんな紙を使っていますか?ふだん何気なく使っている紙は、実は紙の種類で印象も触り心地も変わってきます。 今回オフィスで使う印刷紙、とくに企画書を印刷する際はどのコピー用紙が最適なのか比較してみました。 オフ…

vol.64 これでもうアイコンがにじまない!SVGのデータ作成で気をつけるポイント

こんにちは、デザイナーの野中です。みなさんはデザインしたアイコンをブラウザ上で見た時にアイコンがぼやけたりにじんで表示されてしまった、という経験がありませんか?下の図でも、imageAははっきり表示されていますが、imageBはぼやけています。 image …

vol.63 node.jsアプリをLinuxサーバーで公開してみよう

前回のnode.jsに触れてみよう サーバーサイドJSとはに引き続き、node.jsをサーバー上で動かします。 ひとまずnode.jsを動作させてみたい、と思い前回のTIPSで紹介したフレームワーク「Express」をnode.jsと一緒にインストールし設定、構築します。 現在動作…

vol.62 企画発想のコツ

こんにちは、デザイナーの寺田です。AI(人工知能)や技術の進歩により、わたしたちの働き方は日々変わりつつあります。現在の働き方では、就業者の49%がAIに変わってしまうともいわれています。 雑誌や書籍でもAIについての特集や本が増え、さまざまな業種…

vol.61 CSS肥大化を抑える Sassを使ったコード設計の実践

こんにちは、Webエンジニアの佐藤です。 前回は CSS肥大化を抑える 破綻しないコード設計とSassの導入についてご紹介しました。 今回は、私が業務で使っているCoda2でのSassのインストール・コンパイル方法と、 また前回を踏まえて、実際に業務での実践で意…