はじめに
皆さんこんにちは！新入社員のKです。
最近は外の気温が高くまたマスクは外せないということで、息苦しい夏になっています。水分補給などの熱中症対策を行って熱中症に気を付けていただきたいです。
本日も見に来てくださりありがとうございます！
今私がメインで行っている業務にテンプレート作成というものがあります。
もっと簡単に説明するとホームページのデモサイトを作っておいて、お客様に見せたり、実際に依頼が来た場合にはそれを基準にお客様のサイトを作ったりするいわば見本のようなものです。
今回はそのテンプレートの準備段階なのでコーディングについては触れずタイトルにもある【XD】についての記事になります。
ではここからが本題になります。
XDとは
そもそも「XD」とは
私が今回使ったものは正確には「Adobe XD」のことです。
こちらはAdobeが提供しているデザインオールインワンツールのことです。
Webサイトやモバイルアプリなどのデザインに適しておりスピーディーかつ正確で高い品質で作業をバックアップしてくれるとても便利なツールです。
また作ったものを共有することもできます。
と書いても、実際どんなことが可能なのかがいまいち伝わりずらいとおもうので、私が作成したものを例としてお見せしながら解説したいと思います。
XDを使ってみる
詳しい使い方は割愛して主にどんなことをしているのかの説明をしたいと思います。
ツールを起動する際あらかじめPC画面用やスマートフォン用を選択した場合また、自分で好きなサイズで作る場合、写真の赤で囲っている白い枠（※アートボードといいます。）の中に要素を詰めていきます。
まず作成すべきはワイヤーフレームです。
ワイヤーフレームとは 「ホームページのレイアウトやコンテンツの配置を決めるための設計図」 のようなものです。
どんなサイトにするのかの情報整理やレイアウトの決定、プロジェクトメンバーと認識を合わせたりアイデア出しや議論のたたき台にするために作ります。
私のではこのような感じです。
このように画像を置きたい場所には仮でおいて文章も仮置きしておきます。
この状態でチームの方々がいる場合は共有しOKをもらったら、ここから実際に写真や文章、色を仮置きした状態のものを作成し、完成品のイメージをつけます。
このような感じです。実際に写真や色、文章を置いた場合サイトの完成品がかなりイメージがついたかと思います。
これから実際にコードを書いていく作業に入っていきますが今回はここまでとさせていただきます。
おわりに
本日も読んでくださってありがとうございました。
今回はデザインをやってみました。思っていたより数倍難しく、当社にいるデザイナー含め世の中のおしゃれなサイトを作っているデザイナーはほんとにすごいと思いました。
ですが今作っているこのテンプレートやこれから作るテンプレートがいつか皆様の目に留まり利用していただくためにもこれからコードもデザインもSEOも頑張りたいと思います。
私が入社させていただいてるここk-imagingシステム株式会社は博多駅近くのシステム会社です。
ホームページ制作もいまなら費用は８万円から承っております！！
お値段は格安ですが高品質なサイトを作成します！
会社のホームページを作りたいけど作り方がわからない、うまく作れないなどといったお悩みをお持ちの方、ぜひ k-imagingシステム株式会社 での作成をお願いします！
ご興味のある方は下記画像をクリックしたのち当社サービスサイトをご覧のうえ、お問い合わせフォームよりご連絡お待ちしています。
最近は会社の方と漫画の話で盛り上がることが多く貸し借りも行っています。
ちなみに僕は好きな漫画は「鬼滅の刃」「ハンターハンター」「東京喰種」「呪術廻戦」「チェーンソーマン」「亜人」「ナルト」「ヒロアカ」「スケットダンス」「銀魂」「ダーウィンズゲーム」「賭ケグルイ」などなど
今度いつか読みたいと思っていた漫画をお借りできるかもしれないので楽しみです！
最後にあんまりうまく書けませんでしたが、マキマさんを書いてみました。
