A.C.O. Inc.

DESIGN CONSULTING FIRM 東京

ACO Journal モジュール一覧

h2 フリーアドレス、スタンディングテーブル、照明などなど。ACO的オフィス改善アイデア大公開

h3 多くのお金と広いスペースがあれば簡単ですが、企業である以上予算やスペースにある程度の制限が出てくる

p こんにちは、UX/IA部の長谷川です。質の高い仕事をする上で、良いオフィスは必要不可欠なもの。ACOのオフィスは、この春に拡張工事を行いました。 ACOのオフィスにいらしていただいた方からは、よくオシャレなオフィスですねとお褒めの言葉をいただきます。

実はただ [a] オシャレなだけではなく、ぼくたち [a target:blank] メンバーが働きやすくするための [em] たくさんの工夫やノウハウが凝縮されています。

p-small 通常、会議というとある程度の大きさの空間とテーブル、そして人数分の椅子が必要ですが、スタンディングスタイルにすることで椅子が不要になります。

<h2>テキストテキストテキスト</h2>
<h3>テキストテキストテキスト</h3>
<p>テキストテキストテキスト</p>
<p>[a] <a href="">リンク</a> [a target:blank] <a class="linkBlank4" target="_blank" href="">外部リンク</a> [em] <em>ボールド</em></p>

画像モジュール

S(max-height: 300px)

imgに【brd】classをつけると画像に枠線をつけることができます

<div class="imgS">
<img class="brd" src="ImgURL" alt="">
<p class="caption">キャプション</p>
</div>

M(width: 75%)

キャプション

<div class="imgM">
<img src="ImgURL.jpg" alt="">
<p class="caption">キャプション</p>
</div>

L(width: 100%)

キャプション

<div class="imgL">
<img src="ImgURL.jpg" alt="">
<p class="caption">キャプション</p>
</div>

XL(width: 100vw)

キャプション

<div class="imgXL"><img src="ImgURL.jpg" alt=""></div>
<p class="caption">キャプション</p>

2カラム

キャプション

h2タイトル

p こんにちは、UX/IA部の長谷川です。質の高い仕事をする上で、良いオフィスは必要不可欠なもの。ACOのオフィスは、この春に拡張工事を行いました。 ACOのオフィスにいらしていただいた方からは、よくオシャレなオフィスですねとお褒めの言葉をいただきます。

実はただオシャレなだけではなく、ぼくたち メンバーが働きやすくするためのたくさんの工夫やノウハウが凝縮されています。

<div class="clearfix"><div class="col2"><div class="right">
<img src="ImgURL.jpg" alt="">
<p class="caption">キャプション</p>
</div>
<div class="txL">
<p>テキストテキストテキスト</p>
</div></div></div>

キャプション

h3タイトル

p こんにちは、UX/IA部の長谷川です。質の高い仕事をする上で、良いオフィスは必要不可欠なもの。ACOのオフィスは、この春に拡張工事を行いました。 ACOのオフィスにいらしていただいた方からは、よくオシャレなオフィスですねとお褒めの言葉をいただきます。

実はただオシャレなだけではなく、ぼくたち メンバーが働きやすくするためのたくさんの工夫やノウハウが凝縮されています。

<div class="clearfix"><div class="col2"><div class="left">
<img src="ImgURL.jpg" alt="">
<p class="caption">キャプション</p>
</div><div class="txR">
<p>テキストテキストテキスト</p>
</div></div></div>

ゲスト

Guest

Iwata Saki

岩田 紗季・武蔵野美術大学基礎デザイン学科卒業。制作会社にてランディングサイトやコーポレートサイトなどのデザインを経て現在に至る。デザイン担当。デザイン部所属。

Guest

Iwata Saki

岩田 紗季・武蔵野美術大学基礎デザイン学科卒業。制作会社にてランディングサイトやコーポレートサイトなどのデザインを経て現在に至る。デザイン担当。デザイン部所属。

See Articles

Masashi Ikeno

池野 将司・武蔵野美術大学デザイン情報学科卒業。デザイン制作会社にて企業サイトや紙媒体のデザインを経て、現在に至る。

<div class="guest">
<h2>Guest</h2>
<dl>
<dt><img src="ImgURL.jpg" alt=""></dt>
<dd>
<h3>EnglishName</h3>
<p>日本語氏名・肩書や紹介文など</p>
</dd>
</dl>
</div>
<div class="guest">
<h2>Guest</h2>
<dl>
<dt><img src="ImgURL.jpg" alt=""></dt>
<dd>
<h3>EnglishName</h3>
<p>日本語氏名・肩書や紹介文など</p>
<p class="linkArrowRight6 fontCM"><a href="">TextLink</a></p>
</dd>
<dt><img src="ImgURL.jpg" alt=""></dt>
<dd>
<h3>EnglishName</h3>
<p>日本語氏名・肩書や紹介文など</p>
</dd>
</dl>
</div>
<div class="bgBox01">
<h2>References</h2>
<ul>
<li class="linkArrowRight6"><a href="">LinkA</a></li>
<li class="linkArrowRight6"><a href="">LinkB</a></li>
<li class="linkArrowRight6"><a href="">LinkC</a></li>
</ul>
</div>
<div class="bgBox01">
<h2>Related Links</h2>
<ul>
<li class="linkArrowRight6"><a href="">LinkA</a></li>
<li class="linkArrowRight6"><a href="">LinkB</a></li>
<li class="linkArrowRight6"><a href="">LinkC</a></li>
</ul>
</div>

リスト

  • 鶏肉、じゃがいも、玉ねぎ、にんじんは一口大に切る。
  • 厚手の鍋にサラダ油を熱し、(1)の鶏肉、じゃがいも、玉ねぎ、にんじんと、トマトをよく炒める。
  • 水を加え、沸騰したらあくを取り、弱火~中火で材料が柔らかくなるまで約15分煮込む。
  • いったん火を止め、ルウを割り入れて溶かし、再び弱火でとろみがつくまで約10分煮込む。
<ul class="bullet">
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
</ul>
  • 1鶏肉、じゃがいも、玉ねぎ、にんじんは一口大に切る。
  • 2厚手の鍋にサラダ油を熱し、(1)の鶏肉、じゃがいも、玉ねぎ、にんじんと、トマトをよく炒める。
  • 3水を加え、沸騰したらあくを取り、弱火~中火で材料が柔らかくなるまで約15分煮込む。
  • 4いったん火を止め、ルウを割り入れて溶かし、再び弱火でとろみがつくまで約10分煮込む。
<ul class="number">
<li><span>1</span>テキストテキストテキスト</li>
<li><span>2</span>テキストテキストテキスト</li>
<li><span>3</span>テキストテキストテキスト</li>
</ul>

引用

ウェブは人類史上最大の規模で個人間の情報交換を可能とした。ウェブを通して、地球全体で多種多様な情報を自由に交換することができるようになったのである。

Wikipedia World wide web

<div class="qoute"><span style="color:rgba(0,0,0,0.12);"></span>
<p>テキストテキストテキスト</p>
<p class="text-right mt-1 txOpacity50 p-small"><a href="URL">引用元</a></p>
</div>

会話


JB

昔から、ジャンル問わず自他共に認める大の漫画好きでした。漫画をきっかけに人の新しい一面が見られることもあるので、ACOでも漫画について語らう場を開きたいと思ってました。


鈴木

それではさっそく取材に移りたいのですが、今回「イチオシ漫画特集」を書きたいと思ったきっかけを教えてください。

<div class="clearfix mt-4"><dl class="talkA">
<dt><img src="ImgURL.jpg" alt=""><br>名前</dt>
<dd>
<p>最初の会話モジュールだけclass【mt-4】がつきます</p>
</dd></dl></div>

<div class="clearfix"><dl class="talkB">
<dt><img src="ImgURL.jpg" alt=""><br>名前</dt>
<dd>
<p>テキストテキストテキスト</p>
</dd></dl></div>

<div class="clearfix"><dl class="talkA">
<dt><img src="ImgURL.jpg" alt=""><br>名前</dt>
<dd>
<p>テキストテキストテキスト</p>
</dd></dl></div>

バナー

<div class="bannerWrap"><div class="banner">
<p>ACOでは、コミュニケーション戦略をつくるお手伝いをしています。<br>
興味があればぜひ、<a href="https://aco-tokyo.com/contact/service-contact/">お問い合わせください。</a></p>
</div>
<p class="img"><img src="https://aco-tokyo.com/wp-aco/wp-content/uploads/2018/06/module_bannar_contact.png" width="219" alt=""></p>
</div>

<div class="bannerWrap"><div class="banner">
<p>ACOでは、一緒に働きたい人を募集しています。<br>
<a href="https://www.wantedly.com/companies/aco/projects">Wantedlyから応募</a>お待ちしています</p>
</div>
<p class="img"><img src="https://aco-tokyo.com/wp-aco/wp-content/uploads/2017/03/module_idea.png" width="219" alt=""></p>
</div>

iframe(Youtube)

キャプション

<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/YNXJ2KQ8crg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p class="caption">キャプション</p>
</div>

色変更

h2 フリーアドレス、スタンディングテーブル、照明などなど。ACO的オフィス改善アイデア大公開

h3 多くのお金と広いスペースがあれば簡単ですが、企業である以上予算やスペースにある程度の制限が出てくる

こんにちは、UX/IA部の長谷川です。質の高い仕事をする上で、良いオフィスは必要不可欠なもの。ACOのオフィスは、この春に拡張工事を行いました。 ACOのオフィスにいらしていただいた方からは、よくオシャレなオフィスですねとお褒めの言葉をいただきます。

実はただオシャレなだけではなく、ぼくたち メンバーが働きやすくするためのたくさんの工夫やノウハウが凝縮されています。

<div class="wideBox" style="background-color: #FFFBCB(背景色);">
<div class="container" style="color:#256EC2(文字色);">
<p>テキストテキストテキスト</p>
</div></div>

matgin-top調整用class

pとpの間に余白をつけたい時や、画像の上の余白をツメたい時などに使ってください

mt-8 マージントップ6rem

mt-7 マージントップ5rem

mt-6 マージントップ4rem

mt-5 マージントップ3rem

mt-4 マージントップ1.5rem

mt-3 マージントップ1rem

mt-2 マージントップ0.5rem

mt-1 マージントップ0.25rem

<p class="mt-8">6rem</p>
<p class="mt-7">5rem</p>
<p class="mt-6">4rem</p>
<p class="mt-5">3rem</p>
<p class="mt-4">1.5rem</p>
<p class="mt-3">1rem</p>
<p class="mt-2">0.5rem</p>
<p class="mt-1">0.25rem</p>

補足

こちらのモジュールはこちらからアクセスできます。
https://aco-tokyo.com/wp-aco/wp-admin/post.php?post=17369&action=edit

※モジュールcssを調整する際は
https://aco-tokyo.com/wp-aco/wp-content/themes/aco/common/css/module.css
ftps://aco-tokyo.xsrv.jp/aco-tokyo.com/public_html/wp-aco/wp-content/themes/aco/common/css/module.css
こちらを修正・追加下さい。

  • Get the latest insights

    UXやデザインのトピックからグローバルレポートまで、最新の情報をお届けします

    月1–2回ぐらいで届けます。いつでもキャンセルできます。Privacy Policyをご覧ください

  • Connect

    お悩みのことがあれば、お気軽にご相談ください。

    Contact