使う場合はココに注意!サイドバーのあるWebサイトデザイン

こんにちは、ハヤマです。 今回は、サイドバーのあるWebサイトデザインについて、メリット・デメリットや、コーディングを始める前にデザインの時点で考えておくべき点をまとめていきたいと思います。 サイドバーとは メインコンテンツの横(右・左)にある…

[GoogleFonts]分析データ結果から新たなフォントを開拓:7選

こんにちは、ハヤマです。 前回はGoogleFontsの年間ランキングについて記事を書きました。 tech.arms-soft.co.jp 今回もGoogleFontsのフォントについて調べてみたいことがあったので書いていきたいと思います。 はじめに 前回の記事では、上位5位のフォント…

分析データから見る、2020年の人気Google Fontsはこれだ!

こんにちは、ハヤマです。 唐突ですが、もう年末。今年は色々とありましたね。 色々とありすぎて、季節感すら追えていません、、。 そんな状態ですが、せめてブログでは時期に合ったネタ?を紹介したいと思います。 はじめに Webサイトデザイン制作において…

Webデザインの色を忠実に!カラーマネジメントを理解しよう

こんにちは、ハヤマです。 ストックフォトサービスを提供する「Shutterstock」から、2021年のカラートレンドが発表されました。 選ばれた3色ですが、上品だけれども生命力を感じるナチュラルカラーで、個人的にも好きな配色です。 詳しくはこちら。(英語サ…

[Adobe MAX 2020]Adobe XDに興味があるPhotoshop使いのWebデザイナーにおすすめ!なセッション

こんにちは、ハヤマです。 先週、「Adobe MAX 2020」が開催されましたね。 今年はコロナ禍もありオンラインでの開催となりました。 今回はこのイベントのコンテンツについてお話ししていきたいと思います。 「Adobe MAX」とは? 「Adobe MAX」は、アドビシス…

Adobe XDでデザイン!プラグインを活用しよう

こんにちは、ハヤマです。 最近、弊社もワイヤーフレーム以外にデザイン制作においてもAdobe XDを用いるようになりました。 Adobe XDのメリットはなんといってもデータの軽さではないでしょうか。 配置画像をどんなに拡大・縮小しても画像自体に劣化が発生し…

サイト品質に欠かせない!ブラウザチェック

こんにちは、ハヤマです。 今回は、ブラウザチェックについて書いていきたいと思います。 はじめに ブラウザチェックとは、コーディングしたページがブラウザ上で正常に表示されているかを確認する作業のことを指します。 より良いサイトを作るには、サイト…

文字化けPDFをIllustrator上でアウトライン化する方法を試してみた

こんにちは、ハヤマです。 購読している「Adobe Blog」にて、Illustratorの操作で参考になった記事(動画)を見つけたので紹介したいと思います。 記事について 記事はこちら。 blogs.adobe.com ゲストである博報堂プロダクツの河和田将宏さんが、Illustrato…

Photoshopでウェブデザイン!データ作成のポイント

こんにちは、ハヤマです。 今回は、ウェブデザインのデータをAdobe Photoshopで作成する際、データの作りとして気をつけていることをまとめていきたいと思います。 その1:レイヤー名はわかりやすく ページボリュームが多くなると、モジュールやセクション、…

入力フォームをデザインする時に気をつけること

こんにちは、ハヤマです。 最近、お問い合わせなどのフォームのデザインを行う機会が多かったので、制作時に気をつけるべきことや、気づいたことについてまとめていきたいと思います。 入力内容に合わせて幅を設定する 全てを領域の幅いっぱいまで広げる必要…

デザイン共有ツールZeplinとPhotoshopを連携して、デザイナーとエンジニアの効率をアップしよう

こんにちは、ハヤマです。 今回は、デザイナーとエンジニアの相互の効率を図るためのアイデアを探している時に見つけた「Zeplin」というツールをご紹介します。 Zeplinとは Zeplinの特徴 デザインを構成する情報を確認・取得できる デザインデータに対してコ…

共同編集におすすめ!プロトタイピングツール「Figma」とは?

こんにちは、ハヤマです。 先日、社内SNSにて話題に上がったこちらの記事。 www.itmedia.co.jp 東京都が3月4日に開設した「東京都 新型コロナウイルス対策サイト」。 コロナウイルスに関連するデータ(陽性患者数、検査実施数、相談件数他、相談窓口情報など…

Adobe XD アップデートで新登場!「コンテンツに応じたレイアウト」とは?

こんにちは、ハヤマです。 突然ですが、少しだけ宣伝です。 先日、アームズの公式Instagramを開設しました! 今後こちらのアカウントでアームズの最新情報などを(時にはゆる〜く)発信していきたいと思っています。 ぜひぜひ覗いてみてくださいね。 https:/…

Photoshopの段落スタイル&文字スタイルでテキストデザインを統一しよう

こんにちは、ハヤマです。 若干時間が空いてしまいましたが、今月頭に開催されたAdobe MAX Japan 2019。アーカイブから業務に関連しそうな動画を少しずつ視聴しているのですが、「Adobe capture」でついに撮影画像からカラーでのベクターデータ変換ができる…

Adobeユーザー歴=嵐の活動年数の私がSketchを試してみた

芸術の秋。静岡県三島市にある佐野美術館で開催中のヒグチユウコ展を観に行きました。人の手による緻密で可愛くも不思議な世界観に圧倒され、気付けば散財してしまいました。しばらくは画集を眺めて過ごすハヤマです、こんにちは。 はじめに 突然ですが、私…

ちょっとの意識でふぉんとに違う!〜 行送り・トラッキング数値の計算編 〜

先日の台風、凄まじかったですね。 被害に遭われた皆様に、謹んで心よりお見舞い申し上げます。 『備え』について、改めて考えさせられたハヤマです、こんにちは。 今回はデザインデータで設定されている「行送り」「トラッキング」をCSSで指定する際の計算…

ちょっとの意識でふぉんとに違う!〜 段落間余白のデザイン編 〜

突然ですが、先週スマホアプリ「DQウォーク」がリリースされましたね。 通勤時や帰宅後にゆるく遊んでいますが、位置情報の揺れのおかげ(?)で、ほぼウォークをせずにモンスターを150匹ほどやっつけていました。そんな自分に引き気味のハヤマです、こんに…

ちょっとの意識でふぉんとに違う!〜 文字・段落のスタイル編 〜

ついに梅雨が明けました! とともに、いよいよ本格的な夏のはじまりですね。 先日、会社からほど近くの薬局でガリガリ君が1本48円で販売していてひっそりテンションが上がったハヤマです、こんにちは。 今回は、デザインデータを参照してテキストを実装する…

エンジニアに朗報!VS Codeで使用できる無料校正ツール

こんにちは、ハヤマです。夏至も過ぎ、いよいよ本格的な夏がやってきますね。 ジメジメとした梅雨が苦手で早く抜け出してほしいと思うのですが、その後に訪れるジリジリとした暑さもまた恐怖です。 さて今回は、「校正」についてお話をしたいと思います。 は…

フロントエンドの視点でチェック!そのデータは大丈夫?

毎週、アームズスタッフが様々な視点でお届けしている「Engineers' Blog」。 今回が初投稿となります、ハヤマです。どうぞ宜しくお願いいたします。 私はもともと紙媒体を中心としたグラフィックデザイナーでしたが、様々なお仕事に携わる中でWeb案件の需要…