こんにちは。デザイナー兼エンジニアの酒井です。近年、スマートフォンやタブレット、ウェアラブル端末等の普及によりマルチデバイス化が進むにつれwebサイトの表現方法も多種多様になってきています。ユーザーは様々な新しい表現を求めますが、それに加え使…

こんにちは。デザイナーの那須です。昨今、スマートフォンの急激な普及と利用時間の増加に伴い、インターネットの利用拡大が続いています。企業でもコーポレートサイトを持っていることが当たり前になってきました。それに伴って必要性が高まっているのがSEO…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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