記事の詳細

こんにちは!
皆さんは印象に残るWebサイトといえばどのようなものを思い浮かべますか?
以前ご紹介した2019Webデザインにもある、動画、アニメーションをつける等
目を引くものが良さそうですね!

こんにちは!前回、前々回とHTML、CSSの基本をテンプレート付きで解説しました。今回はブレイクタイムということで、2019年のWebデザインのトレンドをご紹介したいと思...

今回は他サイトと差をつけられるおしゃれなデザイン制作ツールをご紹介!
5分でできるので、ぜひトライしてくださいね^^

制作ツールサイトへアクセス

https://wordart.com/へアクセス。

好きな文字の入力から

②次のページでImportをクリック


③ダイアログ内にあるInput your text here部分にテキスト入力
※基本は英字となりますが、⑥で日本語用のフォントを自身で追加するとVisualizeで反映されるようになります


④入力後、Import wordsをクリック

形、フォント、レイアウトを選択

⑤つづいて「SHAPES」のタブをクリック。左端のメニューもしくは絵の中から探し好きな形をクリック。


⑥「FONTS」のタブをクリックし、好きなフォントをクリック。


⑦「LAYOUT」のタブをクリックし、好きな文字の配置をクリック。
Densityで密度を調整できます。


⑧「STYLE」のタブをクリックし、任意で詳細を調整。


Words colors:shapeはデフォルトの色、Customで好きな色を選択。選択時はCustom横の3色部分から。
Color emphasis:色の強調。
Background color:全体の背景色。
Background image:選んだ形の背景色。
Animation speed:右側の完成形の文字にマウスを載せたときのアニメーションスピード。
Rollover text color:マウスを載せたときの文字色、文字背景。

完成した作品を印刷もしくは保存

⑨赤い「Visualize」ボタンを押して完成!
完成後に印刷する場合は、右上のPrintを。データをダウンロードする場合は、DOWNLOADを。
ダウンロードデータはStandard PNG、Standard JPEGのみ選択できます。
有料会員になるとその他のデータで保存、また様々な機能が使えるようになるので、必要に応じて登録してみてください。

いかがでしたか?
イラストソフトを使わなくてもここまで特徴のあるデザインができます。
トップ画像に大きく、画像の一部に可愛く。ぜひアクセントとして使ってみてくださいね!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
小林紗絵

小林紗絵

Web制作担当をしています。Adobeソフトを使用したデザインやコーディングを中心にサイト制作に携わっております。今後はWordpressのテーマ作成やマーケティングなど少しずつできることを増やしていきたいと思います!

ほかの投稿も読んでみませんか?

コメントは利用できません。

AD

ページ上部へ戻る