*

技術職で誠実さが伝わるサイトにするには

公開日: : 最終更新日:2014/01/16 デザイン系


http://www.syd-tech.jp/

まずトップをぱっと見

職場の気取りのないワンシーンからはじまるメインイメージ。
テーマカラーのfacebookに似た青をアクセント程度に使い、うっすらとグレーで丁寧に背景が整えています。
デザイン処理された写真がバランスよく配置されていて、寂しい印象はまったくありません。
製品紹介などの写真をみるとすぐに精密機器の会社だなぁ、と分かります。

次にテーマカラー

やはり、ベタですが心理的な印象として色は重要です。
こちらのサイトもロゴで使用されているちょっと紫みのはいった青がテーマカラーです。
かたまりとして使われているのはヘッダのみで、後はくどくなくポイントで。
写真が多用されているのでそのバランスもあると思います。

社内の様子をみせる

その写真ですが、自撮りの写真が多く使われて、社内の様子、雰囲気が伝わります。
やはり、会社を知るには社員や職場の様子を見るのが手っ取り早いです。
こちらのサイトでは、「スピードと品質で実現”精選部品”工程」で工場の写真を主に丁寧に説明されています。

また、「モノづくりのフィールドにディレクション力を」でも、取り組み方など会社の方針を伝えることでその考え方が伝わります。
これは、コンテンツありきの考え方で、会社自体が誠実であるか、そうとう腕がよくないとそう見せられませんね。

メインイメージでも、製品に対する姿勢やリラックスした場面があり、大きくとりあげてあります。

細かい所では

細かい所で、業種のイメージとあっていないと、おかしな感じになってしまいます。
精密機器のきちんと動くしっかりした部分を、強いゴシック系のフォントを黒で太く使い、イメージを保っていますね。
ところで、このキャッチコピーをメニューにしてしまうアイデアも面白いです。

全体の構成

トップページで、ほぼすべてのコンテンツを取り上げています。
まず、自分がなんだろう?とクリックしたのは「ディレクション力を」でした。
デザインエレメントも丁寧に作られています。
このコンテンツがグローバルメニューの順序的にも1番に見せたいだろうところで、コンセプトを伝え、技術領域の説明や工程で詳しく読んでもらう感じでしょうか。
工程も、サイドメニューやページングで次のセクションへとジャンプしやすいです。
説明だけをならべるだけだと見た目にも、内容的にも退屈になってしまうので、適度に配置された開発ストーリーのコラムバナーでアクセントになっています。

フッタにも全コンテンツへのメニューがある親切設計です。
写真で目を引く会社情報で住所やTEL番がコピペできるのも便利です。

まとめてみると…

全体的に、行き届いた配慮のなされたサイトは、読みやすさ、使い勝手がよく、ユーザーに好印象を与えます。
その下地の上に、それぞれの業種にあったイメージで、会社の姿勢、様子を”丁寧に”伝えれば、その会社らしさがはっきりと伝わるのではないでしょうか。

この記事が参考になりましたら、嬉しいです。

・個々の会社なら仕事を任せられる度
☆☆☆☆☆

PR

関連記事

no image

大人の女性が旅に行きたくなるようなホームページ

http://santo.my-fav.jp/ ・ぱっと見 明朝体のしっかりしたフォントが目立つ

記事を読む

no image

【1週間分おまとめ】WEBサイトのぶくま#33~美しいデザインのレストランサイト、くるくる動くカメラ、ぴょこっとするアクション~

写真も美しく、メニューのところなど密度のバランスが参考になります。 ゆったり、すっきりとした感

記事を読む

no image

『低燃費少女ハイジ』や『GOLDEN EGGS』を制作したスタジオがRODYとコラボ!

『低燃費少女ハイジ』や『GOLDEN EGGS』を制作したスタジオがRODYとコラボ! htt

記事を読む

no image

【1週間分おまとめ】WEBサイトのブックマーク#31~コーディネーターヒデキ、気になるフォント、パララックスのアイデア~

ロゴもそうだけど遊び心のあるサービスですね。 シーン別も探しやすいし、 コーディネーターさんのコメ

記事を読む

no image

凝ったブックデザインの本販売と蔵書+カフェ紹介のサイト

http://www.superedition.co.jp/ ・ぱっと見 シンプルにまとまった

記事を読む

no image

かわいい系のイラストを上手に使ったサイト

happymaker in 高野山2011 高野山で行われるアートイベントのためのサイトです

記事を読む

【1週間分おまとめ】WEBデザインの人気記事#17~CSSを効率的にSassとCompass、フラットデザインまとめ、スキルを生かしてお小遣い稼ぎ~

ちょっと情報が遅れているので、駆け足でご紹介! 『ウェブサイト作成の勉強になった日本語スライドのま

記事を読む

no image

センスがよくって眺めていて心地良いサイト4つ

ビジュアル的に優れて、センスがいいと独断で感じたサイトをご紹介いたします! http://ww

記事を読む

フォトショで平面を立体に、サイトのカラーチェック、使えるモックアップ~WEBデザインの人気記事#26~

『最近話題になった「9個」のイケてるWebサービス・アプリ(2013年5月編)』 こんなWEBサービ

記事を読む

no image

【1週間分おまとめ】WEBサイトのぶくま#42~タワレコ・風に揺れる髪の表現~

髪やファーがゆらゆらと。。優美です 洗練されたイメージ タワレコ!インパクトある配色

記事を読む

PR

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


PR

no image
ムームードメイン

新たにドメインを取得することにしました。 コスト重視でサーバーは

ルーベンス デッサン模写

アトリエでの課題制作

色彩検定の復習しながらイラスツ

お久しぶりの更新です。 せっかく色彩検定を取ったので、 錆

イラスト フリー素材 円満退社

検索用のタイトルで始まりましたが、 イラスト素材を公開しますー!

更新情報で記事のカテゴリータグを色別で表示【WORDPRESS】

ワードプレスの記事です。 ビギナー向けですが、ネットにちらばって

→もっと見る

PAGE TOP ↑