<h3 id="h1b9800cba2">公式サイト</h3><p><a href="https://streamlit.io/" target="_blank" rel="noopener noreferrer">https://streamlit.io/</a></p><ul><li>デプロイする際はアカウント登録必要</li><li>docのAPIリファレンスに各種ウィジェット(UIデザイン)あり</li></ul><p><br></p><h3 id="h6ce20b43a9">Get Started</h3><p>❶ Pythonファイルを作成 &lt;file名&gt;.py<br>❷ ターミナルで以下を打ち立ち上げ</p><pre><code>$ pip install streamlit
$ streamlit run &lt;file名&gt;.py</code></pre><p>❸ http://localhost:8501でブラウザが立ち上がる<br></p><h3 id="h4b7d14040c">文字を表示する</h3><p>❶ streamlitをimportする</p><pre><code>import streamlit as st</code></pre><p>❷ st.writeでタイトルやテキストを表示する</p><pre><code>st.title(‘Streamlit 超入門’)
st.write(‘これはStreamlit 超入門です。’)</code></pre><p>テキスト以外でも基本「st.xxx()」の形で使用する<br></p><h3 id="h53bb75deb7">マークダウンを表示する</h3><pre><code>“””
# Streamlit 超入門
```
$ pip install streamline
```
```python
import streamlit as st
```
“””</code></pre><p><br></p><h3 id="hbc0c392141">表を表示する</h3><p>❶ pandasをimportする</p><pre><code>import pandas as pd</code></pre><p>❷ DataFrameを作成して表示する</p><pre><code>df = pd.DataFrame({
&nbsp; &nbsp; ‘1列目’: [1, 2, 3, 4],
&nbsp; &nbsp; ‘2列目’: [10, 20, 30, 40]
})
st.dataframe(df.style.highlight_max(axis=0), width=1100, height=300)</code></pre><p><br></p><h3 id="h1aee3eb4b9">チャートを表示する</h3><p>❶ 線グラフ</p><pre><code>st.line_chart(df)</code></pre><p>❷ エリアグラフ</p><pre><code>st.area_chart(df)</code></pre><p>❸ 棒グラフ</p><pre><code>st.bar_chart(df)</code></pre><p><br></p><h3 id="he88891c8d1">地図を表示する</h3><p>❶ サンプルのデータフレームを用意する</p><pre><code>import pandas as pd
import numpy as np
df = pd.DataFrame(
&nbsp; &nbsp; np.random.rand(100, 2) / [50, 50] + [35.69, 139.70],
&nbsp; &nbsp; columns = [ ‘lat’, ‘lon’]
)</code></pre><p>❷地図を表示する</p><pre><code>st.map(df, size=10, color=‘#0000ff’)</code></pre><p><br></p><h3 id="h715bd3c903">画像を表示する</h3><p>❶ 画像処理ライブラリPillow(PIL)をimportする</p><pre><code>from PIL import Image</code></pre><p>❷ 画像を読み込む</p><pre><code>sampleImg = Image.open(‘./img/sample.jpg’)</code></pre><p>❸ 画像を読み込む</p><pre><code>st.image(sampleImg, caption=‘Streamlit’, use_column_width=True)</code></pre><p><br></p><h3 id="h172db61bb3">フォームを表示する</h3><p>❶ テキストフォームを表示する</p><pre><code>text = st.text_input(‘趣味を教えてください’)
‘趣味: ‘, text</code></pre><p>❷ セレクトボックスを表示する</p><pre><code>option = st.selectbox(
&nbsp; &nbsp; ‘好きな数字を教えてください’,
&nbsp; &nbsp; list(range(1, 11))
)
‘好きな数字: ‘, option</code></pre><p>❸ スライダーを表示する</p><pre><code>condition = st.slider(‘今の調子は？’, 0, 100, 50)
‘コンディション: ‘, condition</code></pre><p>❹ 格納メニューを表示する</p><pre><code>ex1 = st.expander(‘expander1’)
ex1.write(‘expander1の内容’)
ex2 = st.expander(‘expander2’)
ex2.write(‘expander2の内容’)</code></pre><p><br></p><h3 id="ha43f10263a">2カラムレイアウト</h3><pre><code>left_column, right_column = st.columns(2)
button = left_column.button(‘テキスト表示’)
if button:
&nbsp; &nbsp; right_column.write(‘右カラム’)</code></pre><p>3カラムなら変数を1個追加しculumns(3)をする<br></p><h3 id="h80d39c3208">サイドバーレイアウト</h3><pre><code>text = st.sidebar.text_input(‘趣味を教えてください’)
condition = st.sidebar.slider(‘今の調子は？’, 0, 100, 50)</code></pre><p>sidebarを付与された要素全てサイドバーで表示される<br></p><h3 id="h0451ebd447">プログレスバーを表示する</h3><p>❶ Python独自ライブラリtimeをimport</p><pre><code>import time</code></pre><p>❷ プログレスバーを表示する</p><pre><code>latest_iteration = st.empty()
bar = st.progress(0)
for i in range(100):
&nbsp; &nbsp; latest_iteration.text(i + 1)
&nbsp; &nbsp; bar.progress(i + 1)
&nbsp; &nbsp; time.sleep(0.01)</code></pre><p><br></p><h3 id="h870be63e2f">アプリをデプロイする</h3><p>❶ requirements.txtを作成する</p><pre><code>streamlit==1.31.1</code></pre><p>バージョンを確認する場合は$ pip freezeで表示可能<br>❷ GitHubにプッシュする<br>❸ Streamlitのサイトでアカウント登録する<br>❹ New appをクリック<br>❺ 各種設定をする<br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/68b018958af34e5f9f20d051492b58cc/deploy.jpg?w=919&amp;h=744" alt=""></p>

Streamlit 超入門〜爆速でPythonアプリ開発からデプロイまで

<h3 id="h53c25334bc"><strong>1.着地ページの調査とバナーに入れる内容を決める&nbsp;</strong></h3><p><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/ea838be4d3a64935870e5e321ae767f9/1.jpg" alt=""><br></p><h3 id="h0e7ece2ba3"><strong style="background-color:#ffffff">2.選んだ内容を文字起こし(ロゴはダウンロード)する&nbsp;</strong></h3><p><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/d392c8d35e9a4a9e87f2a319db06182c/2.jpg" alt=""><br></p><h3 id="h6e01efc912"><strong>3.参考デザインを見る&nbsp;</strong></h3><p><strong>レイアウトパターンの法則性を探る&nbsp;</strong><br>よくあるパターンとして左にテキスト情報、 右にイメージ画像下にコンバージョン文言&nbsp;<br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/44c1665a6b654ea8a0520cf67f922932/3.jpg" alt=""><br></p><h3 id="hd77c32f1e1"><strong>4.文字組みで大まかにレイアウトする</strong></h3><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/016da5509699497a83a10aa7ce013837/4.jpg" alt=""><br><strong>&nbsp;</strong></p><h3 id="h63288c2135"><strong>5.写真またはイラストを探す&nbsp;</strong></h3><p><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/0a2b5747e6ca4eabb7f267c14649e276/5.jpg" alt=""><br></p><h3 id="h421f8caf35"><strong>6.最後にデザインを詰めていく&nbsp;</strong></h3><p>その際、元の文字組みしたレイアウトに引っ張られすぎないように注意する。<br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/77272d7af6554531a6b66ca4847fc078/6.jpg" alt=""></p>

バナー制作時の頭の中　バナーの作成ガイド

<h3 id="h9cbd4e6b3b">①V字モデル</h3><p>UXデザインの役割を説明するためにV字モデルを使用<br>※V字モデルとは、IT製品開発の手法の一種。いわゆるウォーターフォール型のシステム開発の流れを表したもの<br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/20f3a82f12874d35b08fd02caf3e6e5a/1.jpg" alt=""><br>システム開発では灰色部分にしか触れられないケースが多い。<br>上のピンク枠部分までしっかりさせるのがUXデザインの範疇。<br>ピンク枠の部分がスケジュール通り出てこないとスケジュールがカツカツになったり、要件追加の嵐になったりサービスが開始してもすぐ終了という負の連鎖になってしまう。<br></p><h3 id="hd804f7ed0e">②UXデザインの立ち位置</h3><h4 id="h2258c9da96">W字モデル</h4><p>製造と検証を並走させることで品質をあげる考え方<br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/1d12ed5a98cb4f029ef956159304034b/2.jpg" alt=""><br>主に左側の工程と合わせてテスト設計をすることで、要件・仕様定義、設計 の精度を上げるというところがポイント(テストよりもバグの検出が早い)上の部分までしっかりさせるのがUXデザインの範疇。<br><br>ただこれでは抽象的すぎるので、次に「プロトタイプ」を使って説明する。<br></p><h3 id="h9c9e7b470b">③プロトタイプとは</h3><p>技術的な検証や、 問題点を洗い出すために作る試験用のプログラムのこと</p><h4 id="h4b85b00b61"><br>・ホットモック</h4><p>ぎりぎりホンモノではないけど、ホンモノのプログラムに近いプロトタイプ<br></p><h4 id="h617eae37d0">・コールドモック</h4><p>一部ダミープログラムが入ってるけど、一応動くプロ トタイプ<br></p><h4 id="hee08f224af">・デザインプロトタイプ</h4><p>いわゆるデザインカンプやワイヤーフレーム<br></p><h4 id="h49aabc2a20">・ペーパープロトタイプ</h4><p>手書きのラフ<br><br>これを「W字モデル」のフェーズに当てはめてみるとこうなる<br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/bd0d43a075dc43939eb3f7bf04367ccd/4.jpg" alt=""><br>先ほどのモックアップをマッピングするとこんな感じになる。ただし必ずこの工程で作るというわけではなく、「何を確認、検証するか」次第で違うタイミングだったり、作らなかったりはある。<br><br></p><h3 id="hcb9dacb773">結論</h3><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/5f24a02f30674156bf454f93fa00da82/end.jpg" alt=""></p>

【第2回】UXデザインの役割とは

<h3 id="hdb475537c4">UXは「なぜ必要なのか？」</h3><p><br></p><h3 id="h0af25e2687">① なぜ必要なのかを狩野モデルを使って説明</h3><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/901cfbcda2c64606a6a3854eea5d6f6d/1.jpg" alt=""><br>狩野モデルとは東京理科大学名誉教授の狩野紀昭氏が提唱したモデル。<br>顧客の求める品質をモデル化した考え方で魅力品質・一元的品質・当たり前品質の3つのモデルで考えらている。<br></p><h4 id="h20345298df"><span style="color:#ff0045">魅力品質</span></h4><p>不充足でも仕方がないが、充足されれば満足度</p><h4 id="h5f7678da86"><span style="color:#ff7f00">一元的品質</span></h4><p>不充足だと不満、充足されると満足</p><h4 id="hefb1889992"><span style="color:#0058ff">当たり前品質</span></h4><p>不充足だと不満、充足されても当たり前<br><br>これらのバランスをどう考えるか、また“顧客にとって”の魅力をどう創り込んでいけるかがポイント<br><br>例. テレビを例に取ると</p><h4 id="h20345298df"><span style="color:#ff0045">魅力品質</span></h4><p>3Dテレビ、ネットの動画も視聴可能、ステレオ</p><h4 id="h5f7678da86"><span style="color:#ff7f00">一元的品質</span></h4><p>ディスプレイサイズ、高精細</p><h4 id="hefb1889992"><span style="color:#0058ff">当たり前品質</span></h4><p>地デジ視聴、外部端子<br><br></p><h3 id="hf0a941aa13">② 狩野モデルを押さえたところで次に携帯電話を例に取ってみる</h3><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/651c9b8c167b4a55a8fa82509d42a9c0/2.jpg" alt=""><br>いずれも「体験」を提供した製品、サービスといえ、機能も格段に進歩・成長してきたのが分かる。<br>だが、時間と組み合わせて見てみると違う側面が見える。<br><br></p><h3 id="h21adedcefb">③ 狩野モデル + 時間を組み合わせてみる</h3><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/eb8383f79e51405f9d20d77d951c4f1d/3.jpg" alt=""><br>モデルの曲線は時間経過に従って変化する（コモディティ化）。<br>コモディティ化とは、市場参入時に、高付加価値を持っていた商品の市場価値が低下し、一般的な商品になること。<br><br>グラフにも明らかのように、最初は電話が掛けられるだけで魅力だったのが、今はPCでやってたことができてもそれだけでは魅力ではない。&nbsp;つまり、時間経過によって「魅力」が変わってきている。かつ、「魅力」が 作りづらくなってきている。<br>実際、スマートフォンの「魅力」を作ることは難しく、OSのサポートをやめることでユーザを追い立てるというアプローチすら取り始めている。<br>一度、魅力的価値を作ったら終わりではなく、常に魅力的価値を追いかける必要がある。<br>そのためには、単に新しい機能を追加するのではなく、体験を作る必要がある。<br><br></p><h3 id="hcb9dacb773">結論</h3><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/5bc117e538504ae7a01ed35659d1a79c/end.jpg" alt=""></p>

【第1回】なぜUXデザインが必要なのか

<h3 id="hc80f08b7f4">【主なイベント概要】</h3><p>「ポートフォリオに載せる作品を作る」というコンセプトのもと、 1サイト作り切るための情報提供やフォローを行う複数回の開催を予定したイベントです。<br>Adobe XDの便利な機能やサイト作りのコツ、ベンチマークの探し方などを網羅的にご説明し、 希望者限定で、イベント後、アドバイス付きもくもく会を開催し、複数回にわたってフォローアップを行い、Webサイトのトップページデザインを作りあげる挑戦を運営スタッフがサポートするというイベントです。<br>そして4/11に今まで作り上げたデザインをお披露目する会が行われ無事イベントは終了。<br></p><h4 id="h83cc38be5d">Adobe XD User Group Hiroshima</h4><p><a style="color:inherit" href="https://xdug-hiroshima.connpass.com/" target="_blank" rel="noopener noreferrer">https://xdug-hiroshima.connpass.com/</a><br></p><h3 id="hcfbcab04ac">イベントに参加した感想</h3><p>参加者はXD初心者から、XDの応用技術バリバリ使ってる熟練者まで参加しており、いろいろなデザインが見られたり、XDの技術などが学べ、大変有意義のあるイベントでした。<br>また、実務以外でデザインをしてみることによって、実務ではしないようなデザインなど自由に盛り込め、表現の幅が広がったのがめちゃくちゃデカかったです。<br>こういうイベントを開催してくれた運営さんには感謝しかないですね。しかも無料ですよ。今後も可能か限りイベントに参加したいものです。<br>今回は1人で1デザインつくるというものでしたが、プログラムのハッカソンみたいにチームで1つのWebデザインやアプリデザインをつくるデザインソンみたいなイベントもあっても楽しいんじゃないかなあと感じましたね。<br></p><h3 id="h5ef7d69a3b">成果物</h3><p>最後に今回作ったデザインを公開します。<br></p><h4 id="h9f4995c00f">コンセプトシート</h4><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/8c32ab51a41d4ada9a0b40edb4961dda/concept.jpg" alt=""><br></p><h4 id="hb570a6676d"><strong style="color:#222222">デザイン</strong></h4><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/488973d32e074dd5aeaa59e1981567d3/design.jpg" alt=""></p>

「Webサイトデザインを仕上げるために！XDUG広島流スプリント！」に参加した振り返り

<p><strong>登壇者Twitter</strong><br><a href="https://twitter.com/masube_sachi" target="_blank" rel="noopener noreferrer">https://twitter.com/masube_sachi</a><br><strong>ユーザー名: </strong>@masube_sachi<br><strong>ツイッター名: </strong>マスベサチ＠デザイナーさん<br></p><h3 id="ha99a1c828d">準備編<br>① まずAdobeXDのプロジェクト作成</h3><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/73d5157db2ff4624b545082e491930ca/%E6%BA%96%E5%82%991-1.jpg" alt=""><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/7992e44e79d14dc48d37c7aee151577f/%E6%BA%96%E5%82%991-2.jpg" alt=""><br><span style="color:#222222">◯アートボード 設定　カスタムサイズ 1600px×900px</span><br><span style="color:#222222">◯ファビコン用　32px×32px、152px×152px</span><br><span style="color:#222222">◯OGP用 1200px×630px</span><br></p><h3 id="hc61db997b4"><span style="color:#222222">② ブレイクポイント用のガイドを引く</span></h3><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/aba096f3f4a34bc3aebd1ca0314f077a/%E6%BA%96%E5%82%992.jpg" alt=""><br><span style="color:#222222">◯PC 1024px〜, 1200px〜</span><br><span style="color:#222222">◯タブレット 768px〜1024px</span><br><span style="color:#222222">◯モバイル 〜768px</span><br><span style="color:#222222">※事前にエンジニアにブレイクポイントを聞いておくと良い。</span><br></p><h3 id="h38b2137654">調査編</h3><h4 id="h5ac3644ca9">①リファレンス（参考サイト）探し </h4><p>デザイン参考サイトでイメージに近いものを探したり、競合他社のサイトをチェックする 。<br>作りたいブランドイメージに合うサイトが見つかったらタブ表示させておき、いろいろ見比べてイメージに合うデザインを取捨選択し、画面キャプチャを取っておく。<br>※ゼロイチで作るのはやめた方がいい。特にデザインのセオリーが分かっていない初心者がオリジナルで作るとクオリティが低くなるだけなのでオススメしない。<br></p><h4 id="hffda0dfc64">【参考サイト】<br>◇ピンタレスト</h4><p><a style="color:inherit" href="https://www.pinterest.jp/" target="_blank" rel="noopener noreferrer">https://www.pinterest.jp/</a><br></p><h4 id="hc635f8dd3f">◇SANKOU</h4><p><a style="color:inherit" href="https://sankoudesign.com/?" target="_blank" rel="noopener noreferrer">https://sankoudesign.com/</a><br></p><h4 id="h9c94c7562c">◇Responsive Web Design jp </h4><p><a style="color:inherit" href="https://responsive-jp.com/?" target="_blank" rel="noopener noreferrer">https://responsive-jp.com/</a><br></p><h4 id="h5ca871925d">◇MUUUUU.ORG </h4><p><a style="color:inherit" href="https://muuuuu.org/?" target="_blank" rel="noopener noreferrer">https://muuuuu.org/</a><br></p><h4 id="h1fc81d87e0">◇現代デザイン </h4><p><a style="color:inherit" href="https://gendaidesign.com/?" target="_blank" rel="noopener noreferrer">https://gendaidesign.com/</a><br></p><h4 id="he93c5bcff8">◇URAGAWA </h4><p><a style="color:inherit" href="https://uragawa.work/?" target="_blank" rel="noopener noreferrer">https://uragawa.work/</a><br></p><h4 id="hfaf15972d7">【画面キャプチャのオススメの撮り方】</h4><p>ウェブページ全体をスクリーンショット - FireShot<br><a style="color:inherit" href="https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja" target="_blank" rel="noopener noreferrer">https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja</a><br></p><h4 id="hdb4594d18b">② ラフイメージ作成</h4><p>アートボードのまわりに参考サイトのキャプチャを貼っていく 。<br>そのキャプチャのイメージに合う要素切り貼りしながらざっくりページイメージを作っていく。<br></p><h3 id="hc3b49508a9">デザイン編</h3><h4 id="hca1df06696">① 色のイメージを決める</h4><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/a63d62ae56ff4c45b57e414b1c05eed1/%E3%83%86%E3%82%99%E3%82%B5%E3%82%99%E3%82%A4%E3%83%B31.jpg" alt=""><br>ページのテーマカラーを定義していく。<br>・ メインカラー　ページ全体のテーマカラー<br>・ フォント色味　#222222や#333333、もしくはスミ色に少し色を入れるなど<br>・ 背景色　スミ色など濃い色を選択した場合、フォント色は白色になる<br>・アクセントカラー　強調カラー<br></p><h4 id="hb0d1479f01">② 文字のイメージを決める</h4><p>・Webで使用できるフォントを利用する（無料だとGoogle Fontsを利用するのがオススメ。日本語フォントは数が少ない。）<br>・フォントウェイトが多いものを選択するとバリエーションが出しやすい<br>・数字はDINが使いやすい<br></p><h4 id="ha636a52898">③&nbsp;ワイヤーを作っていく（情報設計）</h4><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/0dc701d117f449169733693a31812240/%E3%83%86%E3%82%99%E3%82%B5%E3%82%99%E3%82%A4%E3%83%B33-1.jpg" alt=""><br><br><span style="color:#222222">・ヘッダー</span><br><span style="color:#222222">ナビゲーションはスタック化しておくと、順番を入れ替えたり、要素を追加したり、また削除しても自動的に調整されるので非常に便利！</span><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/a71f156f7b104ccdbf1e68fa962e7b9b/%E3%83%86%E3%82%99%E3%82%B5%E3%82%99%E3%82%A4%E3%83%B33-2.jpg" alt=""><br>・ファーストビュー<br>・お知らせ<br>・アバウト<br>・アクセス<br>・フッター<br>など情報設計に基づいて各要素ざっくりスペースを決めていく。<br>ヘッダーやフッターなどのページ共通部品やh系の各見出しやパターンが同じ要素はコンポーネント化しておくと効率的に作業できるのでオススメ。<br></p><h4 id="h31484eaf3d">④デザインFix</h4><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/ce945997770b43ae96a5fb472278ca3d/%E3%83%86%E3%82%99%E3%82%B5%E3%82%99%E3%82%A4%E3%83%B34.jpg" alt=""><br>ワイヤー作成後ファーストビューの作り込みやその他コンテンツ、下層ページ、モバイルページなどを作り込んでいく。<br>画像なども挿入していく。<br></p><h4 id="h155e085455">【無料素材】</h4><p><a style="color:inherit" href="https://unsplash.com/?" target="_blank" rel="noopener noreferrer">https://unsplash.com/</a><br><a style="color:inherit" href="https://www.pakutaso.com/?" target="_blank" rel="noopener noreferrer">https://www.pakutaso.com/</a><br><a style="color:inherit" href="https://www.photo-ac.com/?" target="_blank" rel="noopener noreferrer">https://www.photo-ac.com/</a><br><a style="color:inherit" href="https://www.ac-illust.com/?" target="_blank" rel="noopener noreferrer">https://www.ac-illust.com/</a><br><a style="color:inherit" href="https://www.silhouette-ac.com/?" target="_blank" rel="noopener noreferrer">https://www.silhouette-ac.com/</a><br><a style="color:inherit" href="https://kage-design.com/?" target="_blank" rel="noopener noreferrer">https://kage-design.com/</a><br><a style="color:inherit" href="https://icooon-mono.com/?" target="_blank" rel="noopener noreferrer">https://icooon-mono.com/</a><br></p><h4 id="hdf9f116319">【有料素材】</h4><p><a style="color:inherit" href="https://stock.adobe.com/jp/?" target="_blank" rel="noopener noreferrer">https://stock.adobe.com/jp/</a><br><a style="color:inherit" href="https://pixta.jp/?" target="_blank" rel="noopener noreferrer">https://pixta.jp/</a><br></p><h4 id="h7d6074ced4">【その他参考】</h4><p>※注釈にはデザインでは絶対使わない色を使う。そうすることでこれは注釈だと一目瞭然でわかるようになる。</p>

【マスべ式】 Webデザイン作成術

<p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/623e58316724484cb638dd4e600a4e35/index.jpg" alt=""><br></p><h3 id="hf8ebf0eb95">1. トンボ（トリムマーク）は作成されているか</h3><h4 id="hb8d328ea28"><strong style="color:#222222">トンボとは</strong></h4><p><span style="color:#222222">断裁する際に必要な四方につけるマークのこと</span><br></p><h4 id="h9f8cfd092e"><strong style="color:#222222">トンボ作成における注意点</strong></h4><p><span style="color:#222222">a . トンボは自作しない（イラストレーターのメニューからつくる）</span><br><span style="color:#222222">b . 紙面サイズがは合っているかチェック（割と間違えがち）</span><br><span style="color:#222222">c . 断裁線は塗りなし、線なしにすること</span><br><span style="color:#222222">d . 切れてはいけない部分は最低でも3mm内側に収める</span><br><span style="color:#222222">e . 断ち切りにする場合、塗り足しは3mmつけること（背景など）</span><br><span style="color:#222222">f . トンボはグループ解除しないこと</span><br><span style="color:#222222">g . トンボと断裁線はずれないようにグループ化していくとなおよし</span><br><span style="color:#222222">h . トンボレイヤーをつくり、ロックかけておくと安心</span><br><span style="color:#222222">i . 印刷会社によってスミ色指定が異なる（デフォルトはスミ400％）</span><br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/dc77678505ba4e2c9c9006d5cdfa8168/1.jpg" alt=""><br></p><h3 id="h35da8afe5c">2. フォントはアウトライン化されているか</h3><h4 id="h97ac5657b3"><strong style="color:#222222">アウトラインとは</strong></h4><p><span style="color:#222222">文字データを図形化すること</span><br><span style="color:#222222">・Macショートカット ⌘ + shift + o</span><br><span style="color:#222222">・Windows ctrl + shift + o</span><br></p><h4 id="h272d55db27"><strong style="color:#222222">アウトライン作成における注意点</strong></h4><p><span style="color:#222222">a . 文字にグラデーションがかかってると校正時と色が変わってしまう</span><br><span style="color:#222222">b . 一度アウトラインすると元には戻せない</span><br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/b5d7d941bb58405687991c7e71fe6ec8/2.jpg" alt=""><br></p><h3 id="h66d19b33f5">3. RGBや特色になっていないか</h3><h4 id="h7a907c0d9a"><strong style="color:#222222">RGBとは</strong></h4><p><span style="color:#222222">R（レッド）、G（グリーン）、B（ブルー）の</span><br><span style="color:#222222">ことで「光の三原色」という</span><br><span style="color:#222222">Webのカラーで使用される</span><br></p><h4 id="hb945962b3c">CMYKとは</h4><p>C（シアン）、M（マゼンタ）、Y（イエロー）、B（ブラック）の<br>ことで「色料の三原色」という<br>DTPのカラーで使用される<br></p><h4 id="hc98954fcbb">特色とは</h4><p>CMYKでは表現できないカラーを取り扱っているカラーパターン<br>主に企業のコーポレートカラーなどによく使用されている<br>イラストレーターのスウォッチにこのアイコンがあると要注意<br></p><h4 id="h601f62cead">確認方法</h4><p>ウィンドウ → ドキュメント情報<br>→ ツールパレットのオブジェクトメニュー<br>→ オブジェクトを全選択して特色がないかチェック<br>（注）スウォッチにアイコンがなくても入っている可能性あり</p><h4 id="he3013d4c05"><br>修正方法</h4><p>全選択 → 編集 → カラーを編集<br>→ CMYKに変換<br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/3ab745f43e8c45d8b05bee01f054ec2c/3.jpg" alt=""><br></p><h3 id="h82b4a97698">4. スミ色割合は印刷会社の指定通りになっているか</h3><h4 id="h0c8e685816"><span style="color:#222222">スミ色割合とは</span></h4><p><span style="color:#222222">スミ色（黒）におけるCMYKの比率を指し示す</span><br><span style="color:#222222">背景などK1色だと裏移りの原因に繋がるので「C1 M1 Y1 K100」や「C40 M40 Y40 K100」などK以外に色を入れると防げる</span><br><span style="color:#222222">※ただし、印刷会社によってその割合が指定される可能性あるので要問い合わせ</span><br></p><h3 id="h8a81016d42">5. 解像度は350dpiになっているか</h3><h4 id="h55a67dd272">解像度とは</h4><p>解像度とは画質の密度のこと<br>単位はdpi（ドットパーインチ）で表す<br>※ここでは深く追求しないので、各自で調査<br></p><h4 id="hab255daac7">解像度における注意点</h4><p>a . 解像度は350dpiが推奨（仕上がりで差が出てくる）<br>b . 原寸（物理的）サイズでこの解像度になってるか確認<br>c . フォトショップで数値を変えることはできるが粗さを変えることはできない<br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/68ae31420be14fd899bb262db7a414ad/4_5.jpg" alt=""><br></p><h3 id="h6b38538d5b">6. 細すぎる罫線を使用していないか</h3><h4 id="h31feff93df">罫線は最小でも0.25pt以上に</h4><p>※細すぎると印刷できない可能性がある<br></p><h4 id="hcb2a904da2">罫線を入れる際の注意点</h4><p>線の方を指定<br>※塗りに指定するとうまく印刷されない<br></p><h3 id="hf3f4c1991c">7. 不要なオーバープリントのチェックが入っていないか</h3><h4 id="hededba6854">オーバープリントとは</h4><p>あるカラーの上にカラーを重ねて印刷することを指す<br>前面にある色と背面にある色とが混ざって印刷されている状態<br>「ノセ」ともいう<br>色が重なることでカラーが濁った感じになる場合あり<br></p><h4 id="h78024a295e">オーバープリントにおける注意点</h4><p>下記サンプルでは、共に真ん中に同じ白色正方形がある<br>見て明らかなようにオーバープリントが入っていると色が消えてしまっている<br>「ウィンドウ → 属性」で編集可能<br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/67c1b9cf5ee44efdaa541b1107b0fc25/6_7.jpg" alt=""><br></p><h3 id="h3bcda3e6b0">最後に</h3><p>最低限、ミスを未然に防ぐ入稿準備を紹介したが、<br>これでも完全ではないことを心に留めておいてほしい。<br>最後は実際の紙面を目視でチェックし、<br>ミスのリスクを減らすことに注力してほしい。<br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/b2bd5ac822604a6d9cf03c15aed484e1/end.jpg" alt=""><br></p><h3 id="h67fd6b262c">入稿準備チェックシート</h3><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/5ea90055b98d416b9bfdfc5c4dbd5210/check.jpg" alt=""></p>

【新人デザイナー必見】DTPデザインデータを作る際に気をつける7つのこと

<p>まず前提として私の考えを述べておくと、阿部 寛のおしゃれかっこいい感じとこのダサいデザインのギャップで世間に話題を生んでいるのはいうまでもないことで、これに関してはデザインの目的をしっかり果たしているので、ある意味正解なんじゃないかと思っている。<br></p><h3 id="h4f5c44efe2">でもやっぱりダサい.....</h3><p>とはいってもかなりダサいデザインで見ていると、なんかリデザインしたい衝動に刈られてしまったので、このデザインを今風のおしゃれかっこいい感じに作り直してみた。<br></p><h3 id="h354bb28524">リデザインのポイントはこんな感じ</h3><h4 id="h37e7e2a0cd">◆全体のテイスト</h4><p>もともとページのテイストは保持しつつ、白場重視のデザインに仕立てた。また、「阿部寛のホームページ」などそこはあえて、昔の感じを残しつつリデザインしていった。<br></p><h4 id="h470349177b">◆サイドバー</h4><p>サイドメニューだけだと単調な感じになってしまったので、彼自身インスタアカウントもあるので、その内容を追加している。こうすることで、よりユーザーとのアクセシビリティを向上させるのが目的。<br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/aada070af2de4a5f819284702a78b580/1.jpg" alt=""><br></p><h4 id="h91de19f7f6">◆ヘッダー</h4><p>今後の内容更新も考えて検索窓、ハンバーガーメニュースペースを取っておくことでユーザビリティ向上が目的。<br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/fb876675f84045f9948ca9fe3cb45b1a/2.jpg" alt=""><br></p><h4 id="hfc19dcbc0e">◆プロフィール</h4><p>元々のページ背景に入っているABE HIROSHIというなんともダサいパターンをプロフィール部分にスッキリ挿入している。さらにここの背景を少し色を入れ、ページ全体が単調にならないように工夫している。<br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/e848a5584e3e44b3af5998a57c994601/3.jpg" alt=""></p><h4 id="hb5916ba54e"><br>◆コンテンツ部分</h4><p>画像・タイトル・本文・注釈といった感じにレイアウトをルール化し、読みやすさ重視でデザインしている。また写真を入れることで、パッと見ただけで何のコンテンツかわかりやすくしている。<br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/47b799eb80a6475091fcae2818b0b598/6.jpg" alt=""><br></p><h3 id="h63df3c5096">全体のレイアウトを見比べるとこうなる</h3><p><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/a3bbf3960ed946dabf8f4aafe7e52e21/4.jpg" alt=""><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/4fcccbe8844c4ef9bd3ccd837186903c/5.jpg" alt=""><br><br>以上で、リデザインは完成！！<br>もちろんはじめの前提でも話しているが、このダサいデザインが必ずしも悪いというわけではないことだけ最後に念押しでいっておく。もし、このサイトが他と同じように今風のデザインならここまで話題にあがることはなかったと思うので、これは戦略的に成功しているのではと感じている。<br>でもやっぱりダサいものはダサいなあ.....<br>以上、お読みいただきありがとうございました。<br></p>

「ダサい」で話題になった阿部 寛のサイトをリデザインしてみた話

<h3 id="ha106a79140">凸デザインと凹デザイン、この2個覚えておけばOK</h3><p><span style="color:#222222">凸凹ボタン2点の作り方を解説いたします。基本的にはこの作り方でほぼ全てのオブジェクトは応用可能です。今回はAdobe XDを使ったNeumorphismデザインの作り方です。XDはAdobe IDの取得後ダウンロードが必要です（無料）。</span><br></p><h3 id="h9504c342c1">A.凸デザイン</h3><h4 id="h92617bea82">1. 四角をつくる</h4><p><br></p><h4 id="h6f6813693e">2. 各種設定</h4><p>角丸: 30mm<br>塗り:&nbsp;<a style="color:inherit" href="https://note.com/hashtag/EFEFEF" target="_blank" rel="noopener noreferrer">#EFEFEF</a>&nbsp;★Point 背景色に合わす<br>線: なし<br>シャドウ: x 5 y 5 b 15 color&nbsp;<a style="color:inherit" href="https://note.com/hashtag/135DC3" target="_blank" rel="noopener noreferrer">#135DC3</a>&nbsp;20%<br>角丸: 30mm<br>塗り:&nbsp;<a style="color:inherit" href="https://note.com/hashtag/EFEFEF" target="_blank" rel="noopener noreferrer">#EFEFEF</a><br>線: なし<br>シャドウ: x −5 y −5 b 15 color&nbsp;<a style="color:inherit" href="https://note.com/hashtag/FFFFFF" target="_blank" rel="noopener noreferrer">#FFFFFF</a>&nbsp;100%<br>※x,y軸マイナスをつけて逆にする<br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/9ed4debff0054e9e892b2b5e1e56a108/1.jpg" alt=""></p><h4 id="h6e585231d8"><br>3. 整列パレットで2つを整列</h4><p>完成<br></p><h3 id="h1b6ab19005">B.凹デザイン</h3><h4 id="heff78f2bb9">1. 各種ボックスを作って上記のように配置</h4><h5 id="hfce9eb2bc0">●赤線: マスク（シェイプ）線</h5><p>角丸: 30mm<br>塗り: なし<br>線: 何でも良い<br>シャドウ: なし<br></p><h5 id="h17dc396153">●青シャドウ: insetシャドウ</h5><p>左上を基準に右と下を赤枠の外まで拡大する<br>角丸: 30mm<br>塗り: なし<br>線: color&nbsp;<a style="color:inherit" href="https://note.com/hashtag/135DC3" target="_blank" rel="noopener noreferrer">#135DC3</a>&nbsp;, size 5<br>オブジェクトのぼかし: 3<br>シャドウ: なし<br></p><h5 id="h1e544b6b12">●白シャドウ: 立体感表現</h5><p>右下を基準に左と上を赤枠の外まで拡大する<br>角丸: 30mm<br>塗り: なし<br>線: color&nbsp;<a style="color:inherit" href="https://note.com/hashtag/FFFFFF" target="_blank" rel="noopener noreferrer">#FFFFFF</a>&nbsp;, size 5<br>オブジェクトのぼかし: 1<br>シャドウ: なし<br><br><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/aa54bb11f7714ce885b3559007643316/2.jpg" alt=""></p><h4 id="he1f48db74f"><br>2. 赤線でマスクする</h4><p>赤線を選択して【 オブジェクト &gt; 重ね順 &gt; 最前面 】<br>※ショートカット: shift + ⌘ + ]<br>3本選択して【 オブジェクト &gt; シェイプでマスク 】<br>※ショートカット: shift + ⌘ + M<br>完成<br></p><h3 id="h3bcda3e6b0">最後に</h3><p>こんな感じで作成できたら、サイズや色、角丸などいろいろ変更することでいろんなバリエーションが作成することができますので、ぜひ、自分なりにカスタマイズしてみてください。<br>また白いデザインに慣れたらダークモードやコードに起こしてみるのもおすすめです。</p>

Adobe XD製 2020 UI Design Neumorphism【作り方伝授】

<h3 id="h3e6427100a">デザイン4原則</h3><p>1.近接 (Proximity)<br>2.整列 (Alignment)<br>3.反復 (Repetition)<br>4.コントラスト (Contrast)<br><br></p><h3 id="h88ac951b33"><strong style="color:#222222">1.近接 (Proximity)</strong></h3><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/bd66a30be6f74513817398d2c8b0e114/1.jpg" alt=""><br><span style="color:#222222">左の例では要素がばらついていてどこに目線をやればいいか、頭の中で整理しなければならず非常にストレスを与えてしまいます。同じジャンルやカテゴリーでグルーピング化すると、初めて見る人でも直感的に構成が理解できるようになります。</span><br><br></p><h3 id="h8a2ab0ea4a"><strong style="color:#222222">2.整列 (Alignment)</strong></h3><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/ed704d9fed0a4e4ca4c38cf00d398fcf/2.jpg" alt=""><br>頭が揃っていないと乱雑な印象を受けるし、近接同様、どこに目線をやればいいか分かりにくくなる。ポイントは見えない線を意識して作ると整然としたデザインが作成できる。<br><strong>★ポイント　</strong>イラストレーターのガイド線を効果的に活用せよ<br><br></p><h3 id="h6e4ff7a8c9"><strong style="color:#222222">3.反復 (Repetition)</strong></h3><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/34894afa25d34a5ea7a7a3be3405e42c/3.jpg" alt=""><br>アイコンや文字フォント、色、大きさなど反復させるとデザインに一貫性や統一感を与えることができる。<br><br></p><h3 id="h6b52b9f64f"><strong style="color:#222222">4.コントラスト (Contrast)</strong></h3><p><img src="https://images.microcms-assets.io/assets/9ae870e480a0445ba8d2c18ac4cf33aa/d3ac12b6605942d59a3e63177efadca8/4.jpg" alt=""><br><span style="color:#222222">コンストラストとは異なる要素をより効果的に見せるために、目立たせたい部分を大きくしたり、装飾など工夫することです。ただし、やりすぎると逆に見辛くなるので、全体のバランス・余白を意識して作成すること。</span></p>

Blogsブログ一覧

Streamlit 超入門〜爆速でPythonアプリ開発からデプロイまで

バナー制作時の頭の中　バナーの作成ガイド

【第2回】UXデザインの役割とは

【第1回】なぜUXデザインが必要なのか

「Webサイトデザインを仕上げるために！XDUG広島流スプリント！」に参加した振り返り

【マスべ式】 Webデザイン作成術

【新人デザイナー必見】DTPデザインデータを作る際に気をつける7つのこと

「ダサい」で話題になった阿部寛のサイトをリデザインしてみた話

Adobe XD製 2020 UI Design Neumorphism【作り方伝授】

コレだけ押さえておけばOK！デザインのキ・ホ・ン

Blogsブログ一覧

Streamlit 超入門〜爆速でPythonアプリ開発からデプロイまで

バナー制作時の頭の中 バナーの作成ガイド

【第2回】UXデザインの役割とは

【第1回】なぜUXデザインが必要なのか

「Webサイトデザインを仕上げるために！XDUG広島流スプリント！」に参加した振り返り

【マスべ式】 Webデザイン作成術

【新人デザイナー必見】DTPデザインデータを作る際に気をつける7つのこと

「ダサい」で話題になった阿部 寛のサイトをリデザインしてみた話

Adobe XD製 2020 UI Design Neumorphism【作り方伝授】

コレだけ押さえておけばOK！デザインのキ・ホ・ン

バナー制作時の頭の中　バナーの作成ガイド

「ダサい」で話題になった阿部寛のサイトをリデザインしてみた話