こんにちは。デザイナーの寺田です。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と一緒にインストールし設定、構築します。 現在動作…

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

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

こんにちは。ウェブエンジニアの毛利です。 私がウェブ制作に携わるようになった2013年頃から2017年にかけて、ウェブ開発を取りまく環境が目まぐるしく変化していると感じます。PCブラウザの急速な進化、マルチブラウザ化、非Flash化、スマートフォンサイト…

こんにちは。デザイナーの寺田です。 ここ最近、UI／UXという言葉を当たり前に聞くようになりました。 UIデザインが増えて、ユーザーはWebサイトをより直感的に 操作することができるようになりました。 最近ではGUI（グラフィックユーザーインターフェース…

こんにちは。Webエンジニアの佐藤です。小規模なWebサイトや単体ページならいざ知らず、大規模Webサイトなどを開発する際、CSSが必要以上に肥大化し、気付けば構造が破綻してしまっていることはありませんか？ Bootstrapに代表されるCSSフレームワークの選択…

あけましておめでとうございます。2017年最初のTIPSです。 Raspberry Pi（ラズベリーパイ）という小型のコンピューターを入手したため、何かできないか？と、すぐにできそうなことを実践してみました。 www.raspberrypi.org 「Raspberry Pi」とはイギリスの…