絞り込み

最新の投稿

プログラミング Polygon
プログラミング

岡大の新工学部HPのヘッダーを無理やり修正する

岡山大学工学部の新ホームページには、表示上の欠陥があります。 情報・電気・数理データサイエンス系とかいう欲張りで長すぎる名前が、「令和3年度〜新生工学部Webサイト」と被ってしまっています。 この現象は、画面の横幅が412px を下回った時に起こります。画像で記述されたロゴがどちらも透過画像であるため、文字が読みづらくなります。 本来は、HPを作成した岡山大学自然系研究科等事務部総務課に連絡すべきですし、今からしようと思いますが、成績が悪くて連絡しづらい夏季休業期間中ということで無理やり修正します。 修正する上での気を付けたことJavaScriptは使わない見た目の問題を後付けスクリプトでいじることはできるだけ避けたい行為です。 疑似要素を活用する既存の要素のプロパティ変更には限界があります。 例えば今回の場合、ロゴがpng画像なので、文字列を改行させるわけにはいきません。 そこで、before/after擬似要素を追加して、「令和3年度〜新生工学部Webサイト」を無理やり書き込みます。 Stylusを入れようStylusのダウンロード Google Chrome拡張の「Stylus」を入れます。Firefoxにも対応していますが、リンクは割愛します。 CSS:root {     --sublogo_width: 35vw;     --header_height: 37px; } #header .inr #logo {     position: relative; } #header .inr #logo a {     z-index: 4; } /* 本来のサブロゴは消す */ #header .inr .sp_subLOGO {     display: none; } h1#logo::after {     position: absolute;     top: 0;     display: none;     height: var(--header_height);     content: '令和3年度~新生工学部Webサイト';     align-items: center;     justify-content: flex-end;     right: 60px;     width: var(--sublogo_width);     font-size: 1rem;     text-align: right;     font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;     z-index: 3; } @media screen and (min-width: 310px) and (max-width: 1000px) {     h1#logo::after {         display: flex;     } } sublogo_width の35vw は完全に適当に決めているので、ベターな値があるかもしれません。 結果 疑似要素に「令和3年度〜新生工学部Webサイト」を書いているため、その横幅に応じて改行がされます。 スマホの横幅だといい感じに改行されて、メインロゴと被りません。なお、あまりに狭い場合はメディアクエリでサブロゴを隠します。 align-items: center; のおかげでいい感じに中央寄せできています。数年前にはできなかった選択肢。ありがとうflexbox!

> 内容を見る

プログラミング Polygon
プログラミング

コミットメッセージとバージョンアップとタグ付けと更新履歴を自動化しよう

コミットメッセージの構文を統一し、レポジトリのCHANGELOG.mdの更新とタグ付けを自動化します。 参考https://itnext.io/how-to-automate-versioning-and-publication-of-an-npm-package-233e8757a526https://numb86-tech.hatenablog.com/entry/2019/07/12/212053https://github.com/conventional-changelog/commitlint この記事でやることコミットメッセージの記法を統一更新履歴とタグの自動化 前提知識Conventional Commitshttps://www.conventionalcommits.org/ja/v1.0.0/ Conventional Commits の仕様はコミットメッセージのための軽量の規約です。 明示的なコミット履歴を作成するための簡単なルールを提供します。この規則に従うことで自動化ツールの導入を簡単にします。 コミットメッセージで機能追加・修正・破壊的変更などを説明することで、この規約は SemVer と協調動作します。 SemVerは流石に知ってたんですが、私はこれを知らずに思考停止でコミットメッセージ書いてたんですよ。いけませんね。 VSCodeにConventional Commitsの拡張機能を入れるhttps://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits ▲これを入れます。 レポジトリパネルに丸マークが出ます。 commitlintのhookを用意する次に、コミットメッセージを制限します。 yarn add -D husky @commitlint/{config-conventional,cli} echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.jsWindowsでは @commitlint/config-conventional @commitlint/cli という風に分けて書きます。 commitlint.config.js がルートに作成されているか確認してください。 yarn husky install npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'上記コマンドでhookを用意します。 package.json{ (...略) "config": { "commitizen": { "path": "cz-conventional-changelog" } }, "husky": { "hooks": { "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" } } }package.json を編集。これでcommit-msg のhookが準備できました。 この状態で適当なコミットをすると、「Conventional Commitsの記法になってない」という理由で怒られます。 はじめてのConventional Commit 変更をステージしてから、さっきの丸マークを押します。 あとは画面の指示に従って選択肢を選びます。まずは「タイプ」。 次に「スコープ」。コミットが関係する領域です。一回作れば使いまわせます。 その後「絵文字」「概要」「詳細」「関係するissue」の順番で書いていきます。 Conventional Commitの記法に従って、以下のメッセージが生成されます。<タイプ>(スコープ):(絵文字) 概要 詳細 関係するissueissueを閉じたいなら、最後(手順6/6)にclose #1 と書けばいいんです。 standard-versionで更新履歴とタグを自動化yarn add -D standard-versionめっちゃ便利な神パッケージです。CHANGELOG.md を自動で書いてくれます。 package.json{ (略) "scripts": { "release": "standard-version", "push": "git push --follow-tags origin main" (略) }, (略) }releaseコマンドで作業をトリガーします。 初回リリースyarn run release --first-release初回は--first-release オプションをつけます。 yarn run release # yarn run v1.22.11 # $ standard-version # ✔ bumping version in package.json from 0.1.1 to 0.1.2 # ✔ outputting changes to CHANGELOG.md # ✔ committing package.json and CHANGELOG.md # ✔ tagging release v0.1.2 # ℹ Run `git push --follow-tags origin main` to publish # ✨  Done in 4.70sこれでバージョンが上がってタグが付き、更新履歴が自動で更新されます。 CHANGELOG.md# Changelog All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. ### [0.1.3](https://github.com/sasigume/project-21600/compare/v0.1.2...v0.1.3) (2021-09-16) ### [0.1.2](https://github.com/sasigume/project-21600/compare/v0.1.1...v0.1.2) (2021-09-16) ### Bug Fixes * **lint:** :ambulance: commitlintの余計な打ち間違いを削除 ([8aa522f](https://github.com/sasigume/project-21600/commit/8aa522f1333f2fd2df60c8d2e285b8e7b8d60e2a)), closes [#1](https://github.com/sasigume/project-21600/issues/1)自動生成された結果です。改行が無駄に多い気がしますね。 バージョン指定なおyarn run release --release-as x.x.x でバージョン指定もできます。 最後にyarn run push でタグ付きでプッシュしましょう。

> 内容を見る

プログラミング Polygon
プログラミング

Jetpack Composeで、Mutable系統をStateに登録したらあかん

タイトルで書いてあることを悟るまでに数日潰したので、怒鳴り散らしながらメモとして残します。 Jetpack ComposeとはAndroid開発において新たな時代の到来を感じさせるUI Toolkitです。 Androidは十数年前に登場して以降、様々なアプリが開発されてきています。 その影響もあり、Android開発を行うときは十数年前のクソみたいな古い風習が残っています。 例えばUIを作成するときです。 Androidでは命令型UIを採用しており、XMLと呼ばれる言語で書いていく必要がありました。 以下のような奴です<?xml version="1.0" encoding="utf-8"?> <androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/LinearLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:background="@android:color/white" android:elevation="4dp" android:orientation="horizontal"> <androidx.appcompat.widget.AppCompatTextView android:id="@+id/title" android:layout_weight="1" android:gravity="center" android:layout_gravity="center_vertical" android:textSize="30sp" android:layout_height="wrap_content" android:layout_width="0dp" android:clickable="true" android:text="@string/title" android:focusable="true" /> <androidx.appcompat.widget.AppCompatImageButton android:id="@+id/delete_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_delete_title" android:contentDescription="@string/delete" /> </androidx.appcompat.widget.LinearLayoutCompat> こんなコードから以下のようなUIが出力されます こんなのコードだけ見ても何を表しているのか、慣れていない人にとってはさっぱりわかりません。慣れててもよくわかりません。 これだけならいいのですが、ここからデータを表示するとなると、KotlinやJavaでコードを書く必要があります。 その書き方がかなりめんどくさいわけです。例えば、以下のような感じになります。 val binding = ChecklistTitleBinding.inflate(inflater, parent, false) val title: TextView = binding.title //要素の文字の部分の設定 title.apply { text = "Hello World" textSize = getTextSize(context).toFloat() //タイトル名をクリックした際の処理 setOnClickListener { clickTitleOnListener(title.text.toString()) } } この通り、部品一つずつ指定して書いていく必要があります。 これで、部品の名前とかはXMLで書いているのでそっちを見ないといけないし、指定するのを忘れていたらバグにつながります。 そこでJetpack Composeの出番です。 これは最近はやっている宣言的UIを採用しており、パッと見たらわかる感じになっています。 例えば、以下のように書くと、先ほど紹介したコードと同じことができます。 @Composable fun LazyCard(text: String = "Hello World"){ Card( modifier = Modifier .padding(10.dp) .fillMaxWidth() ) { Row( modifier = Modifier.padding(12.dp) ) { Text( text = text, modifier = Modifier.weight(1f) ) Icon( painter = painterResource(R.drawable.ic_baseline_delete_24), contentDescription = null ) } } } 以下のような感じですね これだと、コードを見ただけで、先ほどよりは断然分かりやすいと思います。 どのような見た目をしているかだったり、どこにデータが流れていくかであったりが分かりやすいので非常に使いやすいです。 このように、Jetpack Composeは、Androidの新時代を感じさせるUI Toolkitになっています。 本題やっと本題です。 Kotlinには複数のデータを扱うために、標準ライブラリの中にいくつかの型(class)が存在します 例えば配列を扱うためのList型、複数のPair型(keyとvalueを持った型)を扱うためのMap型などがそれにあたります。 これらの型は、一度値を作成したら値を追加、削除することができません しかし、これらを継承した型である、MutableList型、MutableMap型等、Mutable系統であれば可能ですval list = listOf("は", "ひ", "ふ") //コンパイルエラー list.add("へ") val mutableList = mutableListOf("は", "ひ", "ふ") //これはOK mutableList.add("へ") 結構扱いやすく、私もよく利用している型です。 そのため、Jetpack Composeにおいても何気なく使ったことが運の尽きでした。 ある日、こんな感じの、+ボタンを押したらカードが追加されていくアプリを作成しました。 ソースコードは以下の通りです。@Composable fun List(){ //副作用 var list by remember { mutableStateOf((0..3).toMutableList()) } //UI部分 LazyColumn(Modifier.fillMaxSize()){ item{ //カード表示部分 for(i in list){ LazyCard(text = i.toString()) } } item { //ボタン AddButton( //ボタンを押したときの処理 onClick = { val tempList = list tempList.add(4) list = tempList } ) } } } (副作用ってなんやねんて話ですが、話し出すと記事が一つできるような内容ですので省きますが、簡単に言うと、「関数外のところに影響を及ぼす部分」のことです。) このremember{}の部分が何をしているかというと、画面に表示するためのMutableListを保存しています。 rememberのところでState型を保有しておき、それを返してくれます。 これを変数に入れておき、値が変更されると、UIを更新してくれる優れものです。 今回の場合ですと、Listの中身が追加されれば、表示されるリストの数も追加されて以下のようになるはずです。 そして、画面内の+ボタンを押すと、Listの中身が追加されるようになっています。//ボタン AddButton( //ボタンを押したときの処理 onClick = { //別の変数に代入 val tempList = list //変数を追加   tempList.add(4) //listに反映 list = tempList } )つまり、このボタンを押せば増えてくれるはずです。 しかし、実際には増えてくれません。 この挙動のせいで数日間頭を抱える事態に陥ってしまいました 原因結論から書くと、rememberで渡された値が参照渡しになっていることでした。 私の意図した動きは以下の通りです//副作用の部分 var list by remember { mutableStateOf((0..3).toMutableList()) } AddButton( onClick = { //別の変数に、実際の値のコピーを代入 val tempList = list //tempListのリストに、変数を追加   tempList.add(4) //本体のlistに反映(ここで差分を検知してUIの再描画が走る) list = tempList } ) しかし、実際にはこう動いていました。//副作用の部分 var list by remember { mutableStateOf((0..3).toMutableList()) } AddButton( onClick = { //別の変数に、listの参照先を代入 val tempList = list //tempListのリストに、変数を追加(ここで、listの方にも変数が追加される。この追加方法ではUIの再描画が走らない)   tempList.add(4) //本体のlistとtempListの両方に値が追加されたせいで、差分が一切ないため、UIの再描画が走らない list = tempList } ) いろいろと調べてると、どうやらKotlin(というよりJava)では、クラス型は参照渡しを採用しているらしいです。 http://syrinx.q.t.u-tokyo.ac.jp/tori/java/basic/entity_ref.html Mutable系統もクラス型なので参照渡しということですね。 解決策値を新しく作って、ぶち込めば解決です。//副作用の部分 var list by remember { mutableStateOf((0..3).toList()) } AddButton( onClick = { list = list + listOf(list.size) } ) listに、新しくList型を作り直して、それをぶち込んでいます。 ここで重要なのが、Mutable型の特徴であるadd()関数では差分を検知してくれないということです。 ですので、Mutable型を使うことに対するメリットがないばかりか、意図せず使ってしまい、バグを誘発する危険性があります。 だからこそ、Mutable型をStateの部分(rememberのところ)では避けて、普通の型を使うべきでしょう。 以上 しかし、こんな記事俺以外に誰が見るんだろうか・・・

> 内容を見る

デザイン/グラフィック Polygon
デザイン/グラフィック

【アプリ・Webデザイナー必見】 デザインする際に参考にしているサイトまとめ

はじめに 私がよく参考にさせて頂いているデザインサイト・フリーアイコンサイトをまとめてみました! デザイン編 Dribbble 全て閲覧するにはアカウントが必要アニメーションやプロダクトデザインなども掲載されているのが面白いところAdobe Xd や Figma などのツール向けにダウンロードできるのが素晴らしい UI Garage iOS・Web・Androidとジャンル分けされており、すぐに目的のデザインにたどり着けるこのサイトは細かいジャンル分けがされており、「404ページ」・「ダッシュボード」・「設定画面」など90種類以上の項目があり、参考にしたいパーツのデザインにどっぷりと浸かれる記事ページでは、いろいろなサービスのデザイン考察や設計に役立つTipsを載せていて,暇な時間に軽く読める Material Design Googleさんが2014年にデザインガイドラインとして定めた、例の "Material Design"視覚的に良いデザイン・悪いデザインを学習できるのは有名だが、動きや起動画面・テキストの表示方法などの細かいUI・UXも学習できる点に価値ありアイコンやテーマもダウンロードできる 動くWebデザインアイディア帳 ティザーサイトを制作する際にかなり重宝!!かなりかっこいい1つの機能(例: ローディング)にもさまざまな配置パターンが用意されており、コードを書く作業がかなり減るjQueryを使用するものが多いので、脱jQueryを目指している方には大変かも... アイコン編お気に入りのアイコンを一言で紹介 Feather 角が取れた優しいストロークアイコンアイコン数は若干少なめだが、アイコンが統一しているのでナビゲーションバーなどに使いやすい icons8 1つの画像に様々な画風のアイコンがたくさんあるため、このWebページを訪れれば欲しいタイプの画像が見つかる私は 「iOS」 風が好き JAM こちらも丸みを帯びたストロークアイコン先程の Feather と比べ、アイコン数が結構多いのでよく使っている Uicons flaticon の会社がやっている、Font Awesome のようなものアイコンがかなり可愛いのでよく使っているストロークアイコン以外にも、塗りつぶしアイコンにできたり線の角を角ばらせることもでき、拡張性は高い SVG Repo "Collection"という単位があり、その Collection 内にあるアイコン(画像)はテーマが統一されており、同じ画面に複数のアイコンを使う際に見栄えが良いこの "Collecton" がたくさん用意されており(現時点で450+セットある)、フラットな天気アイコンや丸みを帯びた日本食アイコンなど、眺めるだけで楽しい Font Awesome 認知度は一番高いと思うが、一応入れておくCDNやnpmなどから入れることができ、導入がかなり楽アイコン数もずば抜けて多い unDraw 海外のデザイナーたちがよく使ってるフラットアイコン stories 同じくフラットアイコン

> 内容を見る

ガジェット/ハードウェア Polygon
ガジェット/ハードウェア

最強の2-in-1 Windows PCを探す旅

最強の2-in-1 Windows PCを探す旅[警告] このページは非常に情報量が多いです.真剣に2-in-1 Windows PCを探したい人はご覧ください.沼ります. こんにちは.しげです.最近は2-in-1 Windows PCのバリエーションが増えてきましたね.格安モデルから高級なモデルまで,性能も低いものから高いものまで様々です. この記事では各社から販売されている2-in-1 Windows PC(2020年モデル・2021年モデル)を取り上げて,最強の2-in-1 Windows PCはどのモデルか?ということを吟味していきます.皆さんの善きパートナーになってくれるPCが見つかれば幸いです.この記事だけでなく,the比較なども参考にしてみてください. 岡山大学電子計算機研究会に所属している(する予定の)皆さんは,情報・電気・数理データサイエンス系学科の人が多いと思うので,要求するPCの性能はかなり高め(第11世代Intel Core i5またはAMD Ryzen 5 4500U以上,メモリ8GB以上,SSD 256GB以上)で考えていきます.また,大学在学中はMicrosoft 365のライセンスが提供されるので,Microsoft Officeを搭載しないモデルを考えます. *本記事における 2-in-1 PCの定義はタッチパネルを搭載しており,キーボードと本体が分離するデタッチャブルモデルか,画面が360度回転するコンバーチブルモデルに限ります.画面が360度回転しないがタッチパネルを搭載するモデルはこれに該当しません.また,あまりに高価格のPCや企業向けPCは取り上げません.個人向けに販売されている価格20万前後までのPCを対象にします. では,まず候補となるモデルを探していきましょう(2021/8/20時点のモデル).Microsoft Surface Pro 7HP Pavilion x360 14HP ENXY x360 13(Intel,AMD)HP ENVY x360 15(Intel,AMD)HP Spectre x360(13,14,15)Lenovo ThinkPad L13 Yoga Gen 2Lenovo IdeaPad Flex 550Lenovo IdeaPad Flex 550iLenovo Yoga 650Lenovo Yoga 760Lenovo Yoga 750iLenovo Yoga 950iDELL Inspiron 13 2-in-1DELL New Inspiron 14 2-in-1(Intel,AMD)DELL New XPS 13 2-in-1ASUS Zenbook Duo 14 UX482ASUS Zenbook Flip UX371EAFujitsu LIFEBOOK UH95/F1Fujitsu LIFEBOOK WU3/F1TOSHIBA dynabook FZ/HPざっとこんな感じでしょうか.色々な価格帯・特徴をもったPCが集まりました. 中でもデタッチャブルモデルのPCはSurface Proだけですね.他のPCはコンバーチブルモデルです.デタッチャブルモデルのPCで性能を追求するなら,Microsoft Surface Pro一択となるでしょう.デタッチャブルモデルのPCを探している方は,ぜひ岡山大学生協からSurface Pro 7+を購入してください.Intel IrisXeグラフィックスを搭載し,高性能です.Surface Pro 7を自分で買うと色々もったいないと思います. 皆さんが気になるのはやはりコンバーチブルモデルのPCではないでしょうか.デタッチャブルは接点不良が起きたり,インターフェースの数が少なかったりという欠点がやはり避けられません.安定性やインターフェースの豊富さではやはりコンバーチブルモデルのPCです.しかし,各社が似たようなコンバーチブルPCを出しています.どのモデルを選べばいいのでしょうか.ここからはそれを考えていきましょう. 何を重視するかそのPCを用いて何をやりたいかによって,選ぶべき製品は変わってきます.また,製品それぞれに良いところ・悪いところがあります.ここでは,何を吟味するかのポイントについて見ていきましょう.ちなみに,筆者はバランスを重視していて何一つ捨てたくないのが信条です.この記事の最後には,筆者が様々な要素を勘定した最強の2-in-1 Windows PCを発表します.CPUPCの基本性能に関わるパーツの一つです.コア・スレッド数,周波数,キャッシュサイズによって性能が決まります.AMD Ryzenのほうが高性能で低価格なので,Intelでなければいけないなどの特別な理由がなければ,Ryzen 5やRyzen 7搭載のモデルがおすすめです.ベンチマークスコアなどから性能を知ることもできます.マルチタスクをこなすには良いCPUである必要があります.Ryzen 5000番台のRyzen 7搭載モデルがおすすめです.メモリPCの基本性能に関わるパーツの一つです.メモリ速度,チャネル数によって性能が決まります.また,タスクを増やせば増やすほどメモリを使うので容量も吟味する必要があります.一般に8GB,仮想マシンや動画作成などの重い作業には16GB~32GBがおすすめです. ストレージにSSDを搭載するモデルの場合,メモリが不足すると100倍の時間のロスが発生します.今後何に使うか分からないけどずっと使いたいと思う人は16GBにしましょう. Intel Optaneメモリを搭載するモデルもあるようですが,その詳細はよく分かっていません(筆者が無知).ストレージデータを保存するパーツです.何があってもSSDを選びましょう.セカンドディスクとしてHDDを搭載するのは可です.間違ってもOSドライブにHDDを搭載するモデルは買わないでください.人生が終わります. 統合開発環境や仮想マシンの実行,動画作成などでは多くのデータを保存する必要があるため,容量が重要になります.256GBが一般的で,背伸びして512GBもオススメです.とても多くのデータを保存する人は1TBも候補にするといいでしょう.SSD 256GB + HDD 1TBという構成の仕方もいいと思います.ちなみにOSドライブがSSDになっている理由は,HDDに比べて1000倍早い時間で応答するからです.HDDでは応答に時間がかかり,OSがもたつきます.HDDをOSドライブに搭載するPCを購入した場合,間違いなく後悔するでしょう.通信PCを使う上で欠かせないものの一つにインターネットがあります.無線LAN親機との通信を行うためには,PCに内蔵の無線LANモジュール,または外付けの無線LAN子機が必要になります.どの程度の通信速度が出せるかIEEE 802.11で定義される通信規格のどれに対応しているかが関係します.現代のPCはWi-Fi 6(IEEE 802.11ax)及びBluetooth 5.0に対応しているのが一般的です.ディスプレイディスプレイ解像度は蔑ろにされがちですが,1366x768とフルHD(1920x1080),4K(3840x2160)では作業領域の範囲は大きく異なります.解像度が高ければ高いほどキレイですし,作業領域も広いです.一般用途ではフルHDで十分でしょう. また画面比も時折考える必要があります.一般的なPCは16:9の画面比ですが,タブレットとして見ると縦方向が狭く感じるので,近年は3:2,16:10もおすすめではあります.ちなみに筆者は原則16:9派です. ディスプレイパネルの種類も大事です.IPSパネルは視野角が広く,どの角度から見てもキレイに見えますが,TNパネルは少し横から見ると黒く見えるといった特徴があります.デザインや動画編集に使おうとしている人にとっては色域も重要な判断指標です.色域が広いディスプレイは色の再現度が高く,実際に印刷した色との差が少なく,きちんと調整された写真を見たときに実写とほぼ同じように見えます.自然な発色を求める用途には色域が必要です.IPSパネルが最も色域を網羅している場合が多いです(パネル性能に依存します).色域を評価する基準としてsRGBやDCI-P3といった規格があります.バッテリ持ち運ぶノートPCなので,バッテリ持続時間も大事な要素の一つです.特にメーカー公称値はあまり当てになりません.使い方にもよるとは思いますが,公称値の半分くらいしか持たないと考えたほうがいいでしょう.公称値15時間以上はほしいところではあります.どの程度PCを持ち運ぶかによって考えるといいでしょう.セキュリティ(Windows Hello対応デバイス)PCを利用する上で注意しないといけないのが盗難や盗み見です.本人以外がPCに勝手にログインできないようにロックする機能がついていますが,従来はパスワード認証のみで,パスワードを知られると中身を見られてしまう危険性がありました.Windows Helloは顔認証や指紋認証により,本人以外がPCにログインすることを困難にすることができます.セキュリティを重視したい人はWindows Hello対応デバイスを購入することをおすすめします.キーボードPCの使い心地に関わる要素の一つにキーボードの配列があります.よく使うキーが存在するか,テンキーは必要かどうか,キー配列が変でないか(ShiftキーやAltキーの位置,Enterキーと]キーがつながっていないか),キーピッチ・キーストロークはどうか,押し心地はどうかなど,今後長く付き合うパートナーですからしっかり検討しましょう.また暗所での利用を想定している場合はバックライトを装備するキーボードを選ぶとよいでしょう.トラックパッドノートPCにはトラックパッドというポインティングデバイスがついています.ここに指で触れることで様々なジェスチャー操作とスライド操作,拡大・縮小が行えるようになっています.トラックパッドは各社大きさや質感が異なっています.また左・右クリックボタンが別でついているかどうかも判断のポイントになるでしょう.最近は別ボタンを備えないモデルがほとんどを占めています.トラックパッドの位置も大事ですね.拡張ポート拡張ポートがなければ,PCは外部と情報をやりとりすることができません.例えば有線LANポート,USBポートなどです.マウスもつないで,外付けHDDもつないで,外部モニターをつないで...と色々つなぐためにはPCに対応する拡張ポートが存在する必要があります.近年USB-C端子しか搭載しないモデルがあったり,USB-Cポートは1ポートついているけど,充電端子と兼用で充電中は使えないモデルがあったりします(意味不明).またどこにどの端子がついているかも確認して,自分の思い描くデスクが作れるかも考えておきましょう.妄想が止まりませんね.ちなみにVGA端子を備えたPCは,現代にはLet's noteを除いてありません.VGA端子をPCに求めるのはやめましょう.USB Type-CハブにVGA端子があるものを別途購入するのがベターです.HDMI端子がついているPCはたくさんあります. 一般にUSB-C×1~2,USB-A×1~2,SD(microSD)カードスロット,HDMI,イヤホンジャック端子を備えていれば大抵のことには使えると思います.有線LAN(RJ-45)端子は薄型のPCにはついていません.薄すぎてつけるスペースがないんだと思います. ちなみにAppleのMacはUSB-Cしか備えてないらしいですね.無茶苦茶でしょ.ハブ前提はやめろ.ハブだって結構重いし場所も取るんだから.1台で全てを完結できるのが,できるPCだと思います.インチサイズ・重量13インチは持ち運びに適したサイズ感です.一般的なバッグに余裕で入ります.テンキーは備えないモデルがほとんどです.また,拡張ポートにも余裕がないことも多いです. 14インチは13インチだと小さいという人におすすめです. 15.6インチ(15インチ)はやや大きいですが,画面が大きいことから見やすかったり,キーボードがテンキーを備えるモデルが多く,拡張性も高いです.持ち運び用途が少なめの人にはおすすめです.またインチが大きくなってくると冷却機構にも余裕が出てくるため,高負荷時に性能が下がりにくいという特長もあります.デザインどんなに素晴らしいPCでも,デザインがイケてなければ気分も乗りません.どのデバイスが 自分の好みにあうかどうかは,ぜひHPに足を運んで調べてみてください.価格予算問題はいつも深刻です.できるだけ安く済ませたいというのは分かりますが,多くのノートPCの場合は,一番下位のモデルは使えないことが多いです(Core i3やRyzen 3になったり,メモリが4GBで少なかったりする).8~15万程度で予算を見積もるのが良いでしょう.Microsoft Office定番のOfficeソフトです.Word,Excel,PowerPointなどがあります.このソフトだけで2万円程度するので,価格に大きく影響します.今回は搭載しないモデルを考えます.各機種の特長(メーカーHPより抜粋)今までの条件は正直どのメーカーでも似たりよったりな部分がありました.しかし各社はWebページで,機種の特長を紹介しています.他のメーカーにはない,とても魅力的な特長があれば,ぜひそのデバイスを選んであげてください.本記事で候補にしているデバイスの特長を下記に記しておきます.ぜひ検討の参考にしてください(ただ事実を述べているだけで,その機種だけの特長と見なせないものは記載していません).また記載ミスがある可能性もあるので参考程度にご覧ください.Microsoft Surface Pro 7超スリムでわずか 1,252 g の軽さ複数ディスプレイ,ドッキングステーションなどに接続(Surface Dock,別売)HP Pavilion x360 144G LTE対応モデルありコネクテッド・モダンスタンバイ機能搭載ディスプレイを閉じても低消費電力で動作し続ける機能強度と耐熱性に優れたアルミニウム素材をキーボード面に採用45分の充電で約50%まで回復できる急速充電機能「HPファストチャージ」卓越した音響とデザインに定評のある北欧デンマークの老舗オーディオメーカーBang & Olufsen社のB&O Playサウンドシステムを採用HP ENXY x360 13(Intel,AMD)一般的なプラスティックではなく、アルミニウムボディだから見た目の洗練さだけでなく、傷つきにくい仕様11インチ同等のサイズだから毎日の持ち運びも快適アルマイト(陽極酸化処理)加工により、錆・腐食・摩耗を予防10秒で起動,Intel Evoプラットフォーム(Intelモデルのみ)Thunderbolt4 搭載(Intelモデルのみ)30分の充電で6/8時間駆動する急速充電機能「HPファストチャージ」sRGB 100%相当の色域をサポートワンタッチで覗き見防止のプライバシーモードを起動(Intelモデルのみ)カメラキルスイッチ(物理シャッター付)装備マイクミュートスイッチ装備4096段階の筆圧感知卓越した音響とデザインに定評のある北欧デンマークの老舗オーディオメーカーBang & Olufsen社のB&O Playサウンドシステムを採用Gorilla® Glass NBT™により,優れたガラス強度を実現HP ENVY x360 15(Intel,AMD)30分の充電で8時間駆動する急速充電機能「HPファストチャージ」最大400nitsで発光するディスプレイsRGB 100%相当の色域をサポートフルサイズのSDカードスロット搭載外部出力最大4K(3840×2160)を出力できるHDMI 2.0を搭載カメラキルスイッチ(物理シャッター付)装備マイクミュートスイッチ装備4096段階の筆圧感知卓越した音響とデザインに定評のある北欧デンマークの老舗オーディオメーカーBang & Olufsen社のB&O Playサウンドシステムを採用Gorilla® Glass NBT™により,優れたガラス強度を実現HP Spectre x360 135G LTE対応モデルありIntel Optaneメモリ搭載圧倒的耐久性,天面加圧試験 500kgfもクリアできるほど頑丈30分の充電で10時間以上駆動する急速充電機能「HPファストチャージ」最大22時間バッテリ駆動時間だからACアダプターいらず反射しにくい、光沢ディスプレイ(Anti Reflectionコーティング)内蔵型 覗き見防止スクリーン(HP Sure View)対応モデルありカメラキルスイッチ(回路遮断)装備4096段階の筆圧感知卓越した音響とデザインに定評のある北欧デンマークの老舗オーディオメーカーBang & Olufsen社のB&O Playサウンドシステムを採用HP Spectre x360 14アルマイト(陽極酸化処理)加工により、錆・腐食・摩耗を予防天面加圧試験 350kgfもクリアできるほど頑丈アスペクト比3:2を採用した新設計のディスプレイOLED(有機EL)ディスプレイを搭載し,ブルーライトカット対応Delta E <2にキャリブレーションがされたディスプレイで色を忠実に表現45分の充電で7時間駆動する急速充電機能「HPファストチャージ」Thunderbolt4 搭載内蔵型 覗き見防止スクリーン(HP Sure View Reflect)対応カメラキルスイッチ(物理シャッター付)装備マイクミュートスイッチ装備4096段階の筆圧感知卓越した音響とデザインに定評のある北欧デンマークの老舗オーディオメーカーBang & Olufsen社のB&O Playサウンドシステムを採用HP Spectre x360 154K OLED ディスプレイVESA認定のHDR400 TRUE BLACK規格Thunderbolt4 搭載反射しにくい、光沢ディスプレイ(Anti Reflectionコーティング)カメラキルスイッチ(物理シャッター付)装備マイクミュートスイッチ装備4096段階の筆圧感知卓越した音響とデザインに定評のある北欧デンマークの老舗オーディオメーカーBang & Olufsen社のB&O Playサウンドシステムを採用Lenovo ThinkPad L13 Yoga Gen 2Thunderbolt4 搭載急速充電の機能により60分で約80%まで充電(65W アダプター使用時)ThinkShield でデータとデバイスを保護12項目の米軍調達基準に準拠し、200以上の品質チェックデジタルペン標準付属Lenovo IdeaPad Flex 550, Lenovo IdeaPad Flex 550iカメラカバー Privacy Shutter を搭載Lenovo Yoga 650ファブリックカバー採用汚れに強い加工が施され、手に馴染むようにデザインされた丸みを帯びたエッジカメラカバー Privacy Shutter を搭載Lenovo Yoga 760サンドブラスト加工されたアルマイトメタルのボディ急速充電に対応PCは蓋を開けた瞬間に起動カメラカバー Privacy Shutter を搭載Lenovo Yoga 750i10秒で起動,Intel Evoプラットフォームサンドブラスト加工されたアルマイトメタルのボディThunderbolt4 搭載PCは蓋を開けた瞬間に起動カメラカバー Privacy Shutter を搭載Lenovo Yoga 950i10秒で起動,Intel EvoプラットフォームDolby Vision™対応4Kディスプレイ回転式サウンドバー搭載本体に収納可能なアクティブペンは収納時自動充電が可能Thunderbolt4 搭載カメラカバー Privacy Shutter を搭載DELL Inspiron 13 2-in-1sRGB色域100%と300ニットの明るさを実現する色彩豊かな明るいスクリーンDolby Vision™でHDRコンテンツの優れたダイナミック レンジを最大限に活用全辺を狭額縁とすることで高いスクリーン対ボディ比を実現し、すっきりと洗練された画面4K Ultra HDディスプレイ(オプション)選択可能充電式アクティブ ペンは内蔵ペン ガレージの内部に直感的に配置、保管中に充電4,096段階の筆圧検出、傾き検出、クイック キー消去ボタン、Bluetooth接続を搭載したアクティブペンタッチペン設計は、快適性、表現力、機能性に優れています。十角形の形状インテル® EVO™シリーズ接続を維持する音声対応のモダン スタンバイ赤外線カメラ または使いやすい指紋認証リーダー選択可能カバーオープン センサーにより自動電源オンバッテリーが切れた状態から80%にまで1時間で充電可能なExpressCharge802.11 AXワイヤレス プロトコル(Wi-Fi 6)を搭載Thunderbolt4 搭載スマートセンサーを搭載し、PCの場所に応じて温度プロファイルを自動調整Webカメラのプライバシー シャッター搭載DELL New Inspiron 14 2-in-1(Intel,AMD)ExpressCharge対応薄型のベゼルと広々とした画面対ボディ比で、事実上のボーダレスビュー広視野角パネル (WVA)を使用接続を維持する音声対応のモダン スタンバイスマートセンサーを搭載し、PCの場所に応じて温度プロファイルを自動調整(Intelモデルのみ)旧世代よりもキーサイズが9%大きい大型キーボード機械的なプライバシー カメラ シャッター搭載電源ボタンのシングル サインオン(SSO)指紋認証リーダー搭載Dell Mobile Connectによるスマホデバイス連携(データ送受信、スマホ操作)DELL New XPS 13 2-in-1インテル® EVO™シリーズインテルDynamic Tuning Technologyにより、CPUのパフォーマンスを必要に応じて向上Killer™ Wirelessにより、旧世代の80MHz 2x2 AC製品と比べて約3倍高速内蔵のリッド センサーを使用することで電源の状態に関係なく、リッドを開けてすぐに電源投入赤外線カメラ または使いやすい指紋認証リーダーによるサインインHDR 400認定を受けた圧倒的に美しいディスプレイ4K Ultra HDディスプレイ(オプション)選択可能90% DCI-P3の色域により、画面上で高彩度色の優れた表示を実現1500:1のコントラスト比により、明るい色と暗い色のコントラストがより鮮明に0.65%反射防止コーティングDolby Vision™でHDRコンテンツの優れたダイナミック レンジを最大限に活用Dell Eyesafe® により、光源の光エネルギーをインテリジェントに管理し、有害なブルー ライトだけを軽減16:10ディスプレイでより洗練されたフレームレスディスプレイ次世代のMagLevキーボードで、標準キーボードよりも24%薄い一般的なWebカメラよりも多くの素子を使用し、フレームのすべての領域でシャープな映像を提供テンポラル ノイズ リダクションによる高度なノイズ リダクションが使用2つのアルミニウムの塊から削り出されているため 耐久性に優れているCorning® Gorilla® Glass 6により、優れた耐衝撃性と耐擦傷性二重アルマイト加工の光沢面が実現。洗練された仕上がりで、コネクターの傷も防止ENERGY STAR® 認定品Dell Mobile Connectによるスマホデバイス連携(データ送受信、スマホ操作)- ASUS Zenbook Duo 14 UX4822画面搭載PANTONE® カラー準拠の豊かな色再現テュフ・ラインランド認証を取得したブルーライトカット機能タッチ対応セカンドディスプレイ「ScreenPad™ Plus」GeForce MX450搭載可能- ASUS Zenbook Flip UX371EA4K有機ELディスプレイ選択可能米軍軍用規格に準拠したテストを通過トラックパッドでテンキー操作可能- Fujitsu LIFEBOOK UH95/F113.3型ワイド世界最軽量ペン内蔵2-in-1,868gタッチパネル外周に弾性樹脂を配置することで,ガラス割れへの耐力を向上手前側コーナーに弾性樹脂パーツを配置し,衝撃を吸収4096階調の内蔵アクティブペンアクティブペンは本体に収納可能ペンのバッテリーは本体収納中に充電,15秒の充電で90分使用可能豊富な拡張ポートディスプレイ出力と充電が同時に可能なUSB Type-C折りたたみ式LANポート賢い日本語入力・ATOK搭載- Fujitsu LIFEBOOK WU3/F1UH95/F1のカスタマイズ可能モデル- TOSHIBA dynabook FZ/HPDolby Atmos®対応Thunderbolt™ 4対応USB-C給電対応最強の2-in-1 Windows PCは最後に筆者が候補の中から判断した,最強の2-in-1 Windows PCを発表します. なお,HP・Lenovoなどは頻繁に割引セールを行っているため,セール中は他メーカより安い可能性がありますが,今回はそれを除外します.また,安定性を取る場合はIntelモデルを選びましょう.性能部門この部門では,より良い性能(CPU)をより安い価格(メーカー希望小売価格基準)で入手できることを基準に判定します.そのため,要求性能はIntel Core i7またはAMD Ryzen 7,メモリ16GB,SSD512GB以上を前提で判断します. Intel CPUの場合 選ばれたのは,「HP ENVY x360 13(Intel)」でした. 希望小売価格は148,280円で,ペンは付属します.しかし,この機種は画面サイズが13インチのため,キーボード配列がやや特殊です.好みが分かれる部分があると思います.そこで,他にも候補を上げておきます. 「DELL New Inspiron 14 2-in-1(Intel)」と「HP ENXY x360 15(Intel)」です. 前者の画面サイズは14インチでSSD1TBを搭載します.後者の画面サイズは15インチでテンキーを搭載しています.両者ともペンは付属します. それ以外のスペックについては,CPUがIntel Core i7-1165G7,メモリ16GB,SSD512GB(DELL New Inspiton 14 2-in-1は1TB)で同じです.AMD CPUの場合 選ばれたのは,「DELL New Inspiron 14 2-in-1(AMD)」でした. 希望小売価格は129,980円で,これにペン(4,400円)を追加しても,たった134,380円です. AMD Ryzen 7 5700U,メモリ16GB,SSD512GBのモデルです.画面サイズは14インチです.*割引セール中であれば,Lenovo直販が一番安いと思います.時期によって状況は変わりますので,自分で調べてみてください.一時期,Lenovo IdeaPad Flex 550とかは驚異的な値段になっていました.価格部門(メーカー希望小売価格基準)この部門では,とにかく安くデバイスを入手できることを基準に判定します.要求性能はIntel Core i5またはAMD Ryzen 5,メモリ8GB,SSD256GB以上を前提で判断します. Intel CPUの場合 選ばれたのは,「DELL New Inspiron 14 2-in-1(Intel)」でした. 希望小売価格は121,670円で,ペンは付属します. Intel Core i5-1135G7,メモリ8GB,SSD256GBの構成です. SSD512GBが欲しい人は,「HP ENVY x360 13(Intel)」や「HP ENXY x360 15(Intel)」などが同じ価格比で選べます.AMD CPUの場合 選ばれたのは,「DELL New Inspiron 14 2-in-1(AMD)」でした. 希望小売価格は124,370円で,ペンは付属します. AMD Ryzen 5 5500U,メモリ8GB,SSD512GBの構成です. ただ1万円出せば最上位モデルが買えるので,せっかくならもう1万円投資することをオススメします.*割引セール中であれば,Lenovo直販が一番安いと思います.時期によって状況は変わりますので,自分で調べてみてください.一時期,Lenovo IdeaPad Flex 550とかは驚異的な値段になっていました.魅力部門この部門では,ロマン溢れる魅力的な特長を持つデバイスを判定します. 選ばれたのは,「ASUS Zenbook Duo 14 UX482」でした.やはり2画面デバイスは魅力がありますね.セカンドディスプレイはペンに対応しているので,講義を聞きながらデジタルノートも取れそうな感じです.外部GPU「GeForce MX450」を搭載したUX482EGの下位モデルがコスパに優れていそうな感じです. Intel Core i5-1135G7,nVidia GeForce MX450,メモリ16GB,SSD512GBで179,800円です. 今更思ったけどこの機種,画面360度回らなくない?(機種選定の前提条件に反している) まぁロマンがあるからいいや.総合部門この部門では,この記事で触れた全ての要因を総合的に勘定して,筆者がオススメできる1台を発表します.筆者の主観も入ることをお許しください. ちなみに筆者が重視しているものについて先に触れておきます.CPU性能(より多くのコア数と高い周波数,Intel・AMDどちらでも)メモリ16GB(ほとんどの用途に使える多くのメモリ)SSD512GB(256GBでも足りなくなることがある)Wi-Fi 6(IEEE802.11ax)対応13インチ以上の画面サイズフルHD(1920x1080)以上の解像度,周波数60Hz以上sRGB 99%程度の高い色域(デザイン作業や動画編集などの関係で自然な発色が必要)高品質なオーディオ(Dolby Audioまたはオーディオメーカのスピーカー)充電速度(高速充電対応)14時間以上のバッテリー稼働顔認証または指紋認証キーボードバックライト装備テンキー装備大きなトラックパッド(独立したボタンは不要)2つ以上のUSB-A端子1つ以上のUSB-C端子(USB-PDの可否は問わない,映像出力の可否は問わない,Thunderbolt 4の可否は問わない)HDMI出力端子個別充電端子オーディオジャック端子(4極または普通のもの)SDカードスロット2kg以下の重量360度回転10点タッチ4096段階以上のペンの筆圧検知スタイリッシュなデザインコストパフォーマンス(機能に見合った価格かどうか,より安く)筆者は重いゲームはしないので,外部GPUなどを搭載したいという要望はありません. 上記の要件であれば,一般の方からややヘビーユーザまで満足してもらえるデバイスが選べるかと思います. 頑張って1つに絞ろうと思っていたのですが,2つまでしか絞りきれませんでした.幸い両者とも異なる部分が複数あるので,お好みの方を選んで頂きたいと思います.拘りがなければ,1つ目の方を選べば間違いないです. 1.HP ENVY x360 15(Intel,AMD) こんな人にオススメインタフェース(端子類)が多いほうがいい人テンキーが必要な人USB-Aポートが多いほうがいい人HDMIポートが個別であったほうがいい人フルサイズのSDカードスロットが必要な人個別充電端子が必要な人15インチクラスの画面が欲しい人安いほうがいい人性能対コストを重視する人*AMDモデルはペンが別売です. 2.HP Spectre x360 14 こんな人にオススメPCのデザインは拘りたい人USB-Cポートが多いほうがいい人(ハブや変換器は必要かもしれません)microSDカードスロットがあれば十分な人充電器の持ち物を減らしたい人Thunderbolt 4が必要な人インテル® Evo™ プラットフォームに対応したPCがいい人軽いほうがいい人価格面は我慢できる人最後にどの2-in-1 Windows PCを買おうか迷っていて相談したいという方は,筆者のTwitterのDMで教えていただければ相談に乗ります. それでは,ありがとうございました.

> 内容を見る

デザイン/グラフィック Polygon
デザイン/グラフィック

絵を描こう(布教)

おやすみなさい。自称ギャルです。 前回OUCRCの公式キャラクターを描いたよという記事を出したのですが、その時の余談のつもりで用意していた「デジタルイラストを布教する」という内容が本編に比べて余りにも膨大で話の趣旨が逸れてしまったので、記事を分割することにしました。 公式キャラクターのデザインもそうなのですが、部の活動で絵を描くという機会はちょこちょこあります。しかし絵を描ける人材が現在はあまりいないようで、今のところ絵に関する記事は基本的にあまりありません。アタシ悲しいよ。ということで「全人類よかったらお絵描きしませんか?楽しいですよ!!!さぁ描け!!!!!!!」という気持ちでこの記事をお届けします。読者の皆様には多大なるご迷惑をおかけします。 普段描いてる絵の紹介あんまデッサンとかそういうのちゃんと勉強してないので人体描くのはかなり苦手です。というかそもそもTwitterのアイコンを自分で描けるようになりたいなって思って絵を描き始めたのでマジで顔しか描けません。とある部員の方がすごい人体描くのに役に立ちそうな本を部室に置いてくれてるので今度ちゃんと読みます、許して。 2020年の大学祭で公開した音楽ゲーム「Vivace」より、そちらに収録されている自作曲「九尾」のジャケットです。 ロゴのデザインもやってます。 (あと宣伝ですがYouTubeに動画があるので良かったらこのページの右上にある私のプロフィールからどうぞ) これは先日記事にもしましたが、彼女(概念)のRemokoです。 という感じで、普段はだいたいこんな感じの絵を描いています。ちょっと練習すればこれぐらいなら描けるようになるよ、だからさ、絵、描こっか。 作業環境とか読者の各位にはお絵描きをぜひ始めてほしいと言ったので、作業環境について触れていきます。 普段の作業スタイルですが、自宅ではデスクトップPCに、外出先ではSurfaceにペンタブレット(通称ペンタブ)を接続して絵を描いています。(というのもSurface Pro 6のタッチパネルは絵を描くには精度が微妙なので……) ペンタブ購入以前はスマホで指を使って絵を描いていたため、スマホと違って画面に直接触れて描くものではないペンタブの独特の操作感に慣れるまでには少々時間がかかりましたが、慣れてしまえばかなり楽で使いやすいものでした。液晶画面に直接ペンで描き込める通称「液タブ」はその点かなり操作性が素直なのですが、一般に液タブはペンタブに比べて高価なため、まずはあまりお金をかけず手軽にデジタル絵を始めたいという場合はペンタブの方が良いのではないでしょうか。 大雑把な使用感ですが、表面に少しザラザラしたような加工が施してあるので紙に描いているときに近い感触で描けます。私がそうだったのですが、紙だとまぁまぁ描けるけどスマホ+指だとつるつるして描きにくいと感じている方にとってはこれがかなりの強みになるのではないかと思います。 私が使用しているペンタブレットはワコムのIntuos Draw(CTL-490)です。見た目はこんな感じです。 確か私が高校生の頃に中古で購入したものです。新品だと9000円ちょいしますが、これは状態がかなり良いにもかかわらず6000円弱だったように記憶しています。当時高校でメチャクチャ絵が上手かった(今も私より断然上手い)友人がワコム製のペンタブを推していたのでこれにしました。 このIntuos Drawは左上と右上にそれぞれ2つずつ、合計4つのキーがついているのですが、私は現在左上の2つにCtrl+Z、Ctrl+Yを割り当てています。何度も線を引いては消し引いては消し、良い線が引けたら次の線を引くというガチャのリセマラみたいな描き方をしているので、Ctrl+ZやCtrl+Yをペンタブのキー1つで実行できるのは便利です。ちなみに右上の2つに割り当てるキーボードショートカットは現在募集中です。 サイズ感はかなりコンパクトなため手を動かせる範囲は狭く、画面の拡大縮小をガンガン使用して細かい部分を描いていく感じになります。ただしコンパクトなぶん気軽に持ち運びができる点で便利なので、正直このあたりの評価は人によるかと思います。 ちなみにOUCRCの部室にも最近新品のペンタブがやってきました。それに関しては別で記事が上がっていますが、こちらも1万円しないお手頃なモデルなのでこれからデジタル絵を描くぞという方におすすめできるんじゃないかなぁと思います。部員の方はぜひ、そうでない方も部室の見学ついでにぜひ、触ってみてはどうでしょうか。 部での絵に関する活動ここからはOUCRCイラスト勢による過去の活動内容を紹介します。 かの病原体が大流行する以前は毎年コミケに参加していたのですが、その際には部の活動内容をまとめた部誌を頒布していました。この部誌では表紙の絵を部員の誰かが担当して描くことになっています。また、大学祭では学内の教室の1つを部として借り切って展示を行うのですが、2019年の大学祭では絵が描ける部員数名で下描き、線画、塗りを分担して絵を描き上げるリレー企画を行い、完成した絵をポストカードとして頒布するという展示を行いました。 このほか、コミケで頒布するCDのデザインや、部員が作ったゲームのキャラクターの絵など、実はイラスト勢が活躍する場面というのは探せばかなりあります。だからさ、私と一緒にお絵描きしようよ、楽しいよ、お絵描き。 結論デジタルイラストって実はスマホ+指でも描けるし、ペンタブを買えばもうそれだけで十分な作業環境が整っちゃうという意味で、実は初期投資がそこまで高くつかない気軽に始められる創作活動の一つです。興味があればぜひ手を出してみてほしいと思います。 そういうところがオーディオ環境やらDAWやら音源やらと色々出費要素があるし出費額もキリがないDTMとは大違い。 ↑これは忘れてください。部内のDTM勢に怒られるし何なら私もガッツリDTM勢なので今後DTMの記事を書くときにだいぶ困ります。 いいですか、忘れてください。 今日覚えて帰ってほしいのは、デジタルイラストってそんなに敷居が高い趣味じゃないんだよってことです。だからさ、絵、描こっか。DTMは……始めるだけなら敷居は高くない……ですよ、ほんとです、ほんと。

> 内容を見る

デザイン/グラフィック Polygon
デザイン/グラフィック

ことちゃんイラストゆるゆるメイキング【その3】

注意!本記事はことちゃんイラストゆるゆるメイキング【その2】の続きとなっています。まだ読んでない人は是非読んでから本記事に戻ってきてください。 その1はこちら! 今回の内容は資料集めあたり下描きの下描き・カラーラフ下描き線画着彩(キャラクター)着彩(背景)調整の工程のうち着彩(背景)・調整となっています。ようやく完成します。 着彩(背景) 背景は力を入れて描いた訳じゃないので超速でいきます! べた塗りレイヤーで一番後ろを塗って! 長方形ツールで窓っぽくして! ことちゃんの周りにフチをかいてその中を塗りつぶして! フチを非表示にして! 長方形を変形&複製で並べて「!」の丸を作って素材の「白黒フチ取り」で黒フチを作って完成! 以上! 調整いよいよ最後の工程です。長いメイキングもようやく終わりに近づいてきました。 ここで調整前のイラストを見てみましょう。 調整前もかわいいですね!(自画自賛) でも調整したほうがもっとかわいくなります。 色の調整まず色に関して自分が思ったことが髪・パーカーをもう少し暗くしたい肌がくすんで見えるので赤みが欲しい目・睫毛・眉毛が両方とも同じ明るさなので差をつけたいの3点です。 これらを解決するのに「色調補正レイヤー」・「複製して合成モード変更→マスク作成」の手法を使いました。順に説明します。 色調補正レイヤー色調補正レイヤーを使って調整したのは髪・パーカー・肌の部分です。 まずは髪です。色調補正レイヤーのトーンカーブ(RGB)を使いました。 本来トーンカーブは直線なのですが、対角線より低く設定することで「入力に対して出力が低くなる」状態になります。RGBなら、それぞれの値がすべて低くなるので色が黒に近づきます。 隣の調整前と比べると髪が全体的に暗くなってることが分かります。 次はパーカーです。色調補正レイヤーのレベル補正を使っていきます。 先ほどのトーンカーブとは違い、レベル補正はより細かく調整できます。本来中央にあるカーソルを右に移動させました。 パーカーの暗い部分だけがより暗くなりましたね。 最後は肌です。色調補正レイヤーのトーンカーブ(Red)を使います。 髪とは逆に、対角線より高く設定することにより「入力に対して出力が高くなる」状態になります。さらにRedのトーンカーブだけを設定することによって、RGB値のRだけが高くなって赤みだけが増すことになります。 赤みが強くなって元より生き生きとしたお肌になりました! 色調補正レイヤーを使うときはクリッピングをしてほかの部位には影響を及ぼさないようにします。 乗算レイヤー&マスク目・睫毛・眉毛は乗算レイヤーとマスクを使って暗くします。マスクについて簡潔に説明するなら、「マスクをかけた部分だけ非表示にする」といったところでしょうか。今回ツール自体を説明するわけではないので詳しい説明は省きます… どの部位も同じ手順なので箇条書きで説明します。暗くしたい部位のフォルダーを複製してレイヤーをすべて結合暗くしたい部分を投げ縄選択で囲み、選択範囲外にマスクをかける合成モードを乗算にし、不透明度を変更して調節お気軽にできますね!この手順を踏むとこのようになります。 細かい違いですが、左側のパーツが全体的に暗くなってることがわかります。 線の調整線については調整部分が二カ所あります。瞳・睫毛・眉毛を囲んでた線を非表示色トレスで雰囲気を柔らかくするです。 マスクによる線の非表示単純です。消したいところにマスクをかけただけです。 もはや間違い探しの域に入ってきましたね… 色トレス色トレスとは「線画の色を周りの色に近づけることにより、線画を色と馴染ませる手法」のことです。やり方は自分で調べてください…説明に疲れてきました… ありがたいことにクリスタには「主線色かえ」という素材が配布されてるので使っちゃいます。楽したいですもん… 色トレス前との違いはわかりやすいと思います。一気に雰囲気が柔らかくなりました。 完成!長い長いメイキングが終わりました。というわけで完成品をもう一回ご覧ください! か わ い い ! (圧倒的自画自賛) おわりにこんなこと言うのもアレですが、自分史上一番うまく描けたと思います。(2021年9月9日時点) なんせ何日もかけてイラストを描いたのは初めてなのです。感慨深いです。達成感がスゴいです。疲れましたが、それ以上に満足感があります。改めて「イラストを描くのは楽しい」と思えました。 今回ながーーーいメイキング記事を書かせていただきました。最後まで読んでくれた方には感謝しかありません。それではありがとうございました! このメイキング書くのめちゃめちゃ時間かかったので、次回からもう少し簡単な記事にしようと思います……では。

> 内容を見る

デザイン/グラフィック Polygon
デザイン/グラフィック

ことちゃんイラストゆるゆるメイキング【その2】

注意!本記事はことちゃんイラストゆるゆるメイキング【その1】の続きとなっています。まだ読んでない人は是非読んでから本記事に戻ってきてください。その1から飛んできた人はそのままどうぞ! 今回の内容は資料集めあたり下描きの下描き・カラーラフ下描き線画着彩(キャラクター)着彩(背景)調整の工程のうち着彩(キャラクター)となっています。画像主体なので気軽に読んでください。説明の中身がないとも言う 着彩(キャラクター)ここまで来れば後は色を塗るだけです。とりあえず全体像がこうです。 ここで、完成したイラストと色を見比べてみてください。結構違うことに気づくと思います。非表示トーンカーブやらレベル補正のレイヤーがありますが、それを使って後から色の調整をしています。 というわけで、上の画像には調整前の色が写ってることになりますね。後から色をいじれるのもデジタルイラストの便利なところです。 それでは部位ごとに塗り方を見ていきましょう。下層にあるレイヤーから順に説明していきます。本当は描いた順番から説明しないといけないんですが、ちょっと忘れてしまったので…… 肌 まず全部のパーツに共通して「下塗り」があります。ここの色にはさっきのカラーラフで用いた色をそのまま、もしくは少し調整して塗ります。ツールは「隙間なく囲って塗るツール」という大変便利な素材を使いました。線画の下まで塗ってくれます。 「肌陰」では文字通り肌の陰を塗りました。まず赤で囲った部分を、選択した色が濃く出るように不透明水彩でゴリゴリ塗ります。このとき一色で塗りました。単一レイヤーで描いたので途中経過が残っておらず分かりにくくて申し訳ないです… ここからは特別に言及がない場合、不透明水彩で塗ってると読んでください。 最初から細かく陰の色を指定して塗ると自分は訳が分からなくなってしまいます。「その部分に光が当たってるか当たってないか」の基準で判断して一色で塗ることにより単純化してから、より詳しく描き込むやり方です。 それから「光が当たってないところでより暗い、より明るい面」・「光が当たっているところでより暗い、より明るい面」を探し、中間色を作って自然なグラデーションになるように塗っていきます。「不透明水彩で塗る→スポイトで色を取る→中間色を作る→不透明水彩で塗る→…」を自分が表現できる限界まで繰り返します。他の部位というか、ほぼ全ての部位でも大体こんな感じです。 「赤み」では、肌色に少し赤みを追加した色を目の周りと頬に薄く塗りました。顔の皮膚が薄いところは赤みが出るので赤く塗ると生き生きして見えるとかなんとか… 拡大してみると例の線があったり。 「肌影」では髪の下に隠れて光が当たらない部分を濃い色で塗りました。以上! パーカー 似たことを延々と書くの読むのも面倒で大変で飽きるので、ここからはメチャクチャ簡略に紹介していきます。非表示のレイヤーは後で解説! 「パーカー下塗り」:「肌下塗り」と同じ 「塗り」:「肌陰」と同じ・青みを濃くした色を陰に使ってみた・しわなど盛り上がってる部分を意識した・右半身後ろ斜めからのリムライトを描いた タイツ 「タイツ下塗り」:「肌下塗り」と同じ 「塗り」:「肌陰」と同じ・皮膚が透けて見える部分は紫色を混ぜた色を使った・タイツの厚みがあるところは下塗りの色に近い色を使った 「リムライト」:パーカーのときと同じ(なぜかレイヤー分けされてる…) 髪 「下塗り」:「肌下塗り」と同じ・青グラデーションは不透明水彩 「髪」:「肌陰」と同じ・陰は半球を意識して塗った 「ハイライト」:カラーラフでは大きめ・水色だったけど、主張が強すぎだと感じたので小さめ・グレーに変更 目目に関しては今までと違う部分がかなり多いのである程度説明します。 白目フォルダの「下塗り」に関しては今まで通りの下塗りと同じですね。あえて強調することならRGBオール255の完全な白色ではないことですかね… 「白目」では白目の色にうっすら青みを入れた色を使っています。 瞳フォルダの「下塗り」については言うまでもなく。 「光彩1」は大事なレイヤーその1になります! まず、色のランダム性を出したかったので、エアブラシツールの中の「飛沫」を粒子サイズと密度を下げて使い、彩度が高くて明度が低い青と彩度が低くて明度が高い青の二つを塗りました。それからぼかしていきます。このとき、完全にぼやかさずにある程度形が残るようにブラシを調整しました。そしてアクセントに薄い黄色を入れます。このときはぼやかしていません。 「光彩2」では瞳の下の部分を塗りました。暗い部分により明るい部分を重ねて塗る感じですね。 「サイバー」は大事なレイヤーその2になります! 文字通りサイバー感を出したかったので、「なんか青い光が流れてて枝分かれしてるやつ」とクロック波を書きました。枝分かれしてるやつはべた塗りペンで水色を塗った後、その色に青みを追加したものを置きました。光が流れてく様子を表現するために左右で青を乗せる位置を変えてます。クロック波はデコレーション>罫線>デコボコの高さを調節して書きました。 下の画像は、「下塗り以外非表示・合成モード通常」→「下塗り以外非表示・合成モード覆い焼き(発光)」→「下層レイヤーを表示・合成モード覆い焼き(発光)」の順で並んでいます。通常の色より大分明るくなってるのが分かると思います。 一気に瞳の情報量が増えてよくなってきましたね! 「ふち」では瞳の淵をべた塗りしていきます。 「瞳孔」も文字通りですね。参考にした絵が瞳孔の外周に少し明るい色を塗ってたので、自分もそうしてみました。 「ハイライト」では、目の輝きを強くしたかったので二カ所にハイライトを描いています。ハイライトの中で暗いところを描いて、それより明るい色を乗せています。 「下塗り以外非表示・合成モード通常」と「下層レイヤー表示・合成モード加算(発光)」との比較です。元の色の参考にどうぞ。 「目影」レイヤーです。睫毛でできる影と白目自体の陰を描きます。 「下塗り以外非表示・合成モード通常」と「下層レイヤー表示・合成モード乗算」の比較です。元の色より暗くなってることが分かりますね。 睫毛 「睫毛下塗り」:もう説明要らないですよね…? 「睫毛」:左上に見えるように光るロゴがあるので、両睫毛の左に青みを追加・逆に右には肌色を乗せた色を追加 眉毛 「下塗り」:言わずもがな 「眉毛」:睫毛のときと同様に左に青み、右に肌色みを追加 髪飾り 「下塗り」:いつも通り! 「髪留め」:乗算レイヤーを使って元の色より暗くした 「リムライト」:今となって不要なことに気がついた… 「光るロゴ」:加算レイヤーを使って元の色を明るくした その2おしまい今回はキャラクターに色がつくまでを説明しました。色がついた瞬間、自分のテンションもモチベーションも上がるので楽しいですね。 例によって、ことちゃんイラストゆるゆるメイキング【その3】に続きます!ここまで読んでいただきありがとうございました! …後半説明が雑になってきて申し訳ないです。

> 内容を見る

デザイン/グラフィック Polygon
デザイン/グラフィック

ことちゃんイラストゆるゆるメイキング【その1】

こんにちは、米です。今日も元気に、そして怠惰に一日を過ごしています。 御託並べはさっさと切り上げ、本題に入りましょう。今回、OUCRC公式キャラクターの言十(こと)ちゃんのイラストを描いたので、メイキングについてゆる~い説明をしようと思います。 完成したイラストはこちら! それでは早速メイキングにはいります。大まかな手順としては、資料集めあたり下描きの下描き・カラーラフ下描き線画着彩(キャラクター)着彩(背景)調整といった感じです。資料に関しては必要になるたびに集めています。言い忘れてましたが主な使用ソフトはCLIP STUDIO PAINTです。 今回は資料集め~線画までの内容となっています。 資料集めイラストを上手く見せたいなら資料は必須です。めちゃくちゃ大事です。想像だけで描けるなら苦労しません。少なくとも自分は資料がないと描けません… 資料集めに関しては以下の方法があります。自分で作る本・実物を買う画像検索多分もっと方法はあると思いますが、自分はこうしてるよってことです。 まず、自分で資料を作ることについてです。自分で作ると一言でいっても、様々な方法があります。 ポーズ系のソフトを使う、自撮りする、写真を撮りに行く、モデリングするetc…いっぱいありますね。 自撮りに関しては自分のツラと体型を見るのが嫌なのであまりやりません。せいぜい手の参考にするくらいです。このとき三脚やリモートシャッターがあると便利だと思います。 写真を撮りに行くについても、近くの公園とかだったらいいんですけど、海とか山になると時間もお金もかかるので自分は出来ません。構図の勉強にはなるんですけどね… というわけで今回はポーズ系のソフトを使ったり、元々モデリングしてあったものを資料として使いました。 ポーズ系のソフトは「デザインドール」の無料版を使用しています。操作が直観的なのでクリスタの3Dモデルより重宝してます。ライセンス版欲しいけどお金ないよ モデリングはBlenderでしています。完全無料なので安心! ちなみにデザインドールで書き出した画像はこちらです。 ポーズは、自分で実際にやってみて無理がないか確認しながらつけるのがいいです。また、デザインドールにはモデルをワイヤーフレームに切り替えることもできるので、そっちの画像も書き出しておきます。 Blenderで書き出した画像はこちらです。 実際はpngで保存してて背景が透明なんですけど、この記事では見にくいのでjpegに変更して載せています。こいつはそのままイラストの下書きにぶち込んでるので厳密には資料ではありませんが… 次に本についてです。実物は使ってないので省きます。主に参考にしたのは「デジタルツールで描く!服のシワと影の描き方」という本です。内容はタイトルのまんまなので詳しく紹介しませんが、シワについての基本や、写真付きの実例が多く載ってるのでいい本だと思います。 今回はあまり参考にしてませんが、「スカルプターのための美術解剖学」シリーズや「モダリーナのファッションパーツ図鑑」シリーズなんかもおすすめです。 資料本を買うときは、本屋で内容を少しばかり確認してから買うのを推奨します。ネットで買って届いて読んだらコレジャナイのは結構きついです。大量に集めようとするとお金もかかるので… ちなみに、スタンドを買うと読みやすくなっていですよ(手前)。Amazonで安く売ってるので探してみてください。後ろのは百均で買ったA4スタンドです。 最後に画像検索についてです。これが一番の本命ですね。 Google検索などでもいいですが、自分はPinterestというサイトで検索しています。短く説明すると、検索して気に入った画像(ファイル)をピン止め(保存)してボード(フォルダ)に整理するといった形です。 集めた画像はPureRefで表示してます。たくさんの画像をいい感じに整列してくれるので便利です。詳しくは検索してください(説明が面倒なだけ)。 あたりとりあえず、最低限の資料を集めたらあたりを描いていきます。以下のように画像に線を引いてやると比率や位置関係が分かりやすくなります。 これを参考にあたりを描いていきます…が、今回自分が描いたあたりが下手くそすぎたのであまり役に立ちませんでした…せいぜい位置関係を把握するくらいにしか使えませんでした。 恥ずかしいのであまり載せたくないのですが、自戒も込めて貼っておきます(原色バリバリなので透明度下げてます)。レイヤー構造は別にいいでしょう。 この時点で変形などで修正してたら後でやらなくてもよかったんですけどね…ちなみに。あたり~下描きまでは「アニメーター専用リアル風鉛筆」という鉛筆ツールで描いてます。無料でダウンロードできます。 下描きの下描き・カラーラフ「下描きの下描きって何だよ?」ってなるかと思いますが、文字のまんまです。下描きと同じ鉛筆を使っています。 下描きの(略)がこちらになります。 レイヤー名と色で構造は大体わかると思います。 体はデザインドールの資料を参考に描き進めていきます。このとき、少しでも違和感を感じたらとにかく「投げなわ選択→メッシュ変形」の力業で修正していきます。初心者なので一発でキレイに描くのは難しいのです。 いちばん苦労したのは手ですかね。いかんせん目立つところなので丁寧に修正しました。 顔パーツに関しては目が命です。投げ縄選択・メッシュ変形・左右反転などあらゆる機能を駆使して形を整えなければなりません。目のバランスが崩れると絵全部が崩れてしまうような、そんな威力があると考えてます。ほかの部位は位置がおかしくなければ大丈夫かなとか思ったり思わなかったり。…この時点だと鼻の位置がおかしいですって?あとで直したので許してください。 服については、パーカー部分はダボッとしたように見せるため体部分より大きめに、逆にタイツ部分はピチッと見せるため体の線に沿って線を描いていきます。パーカーが柔らかく厚手になるように、尖らせないで丸く大きく肘と肩に集中してしわを描きました。 髪の線は、顔を傾けてるので、接地面に対して垂直に近くなるように描きました。つむじは頭のてっぺんに来ると仮定してます。 次はカラーラフです。「こういう感じにしようかなぁ」くらいの気持ちで描いてるので大分粗いです。 まずは下描きの(略)を元に、ペンツールでべた塗りしていきます。髪の青いところは筆ツールを使って描いた…ハズ。 ロゴ部分はさっきの画像を貼り付けて変形したものです。 どうせ後でもっと描き込むのでささっと描きます。光源の位置は斜め後ろであることを意識しながら塗ります。本質的な部分ではないので説明も省きます。 カラーラフの時点で「世には出せるかなぁ」の意気込みでやると後々気が楽になります。 下描きの下描きとカラーラフを合わせたものです。 下描き下描きの(略)とカラーラフを元に下描きしていきます。部位によって不透明度を適宜変えて描いていきます。 さっきの工程で形はけっこう整えてるので、ほぼなぞってるだけだったりします。その上でさらに違和感があるところを直していく感じですね。OUCRCロゴは直線ツールで作りました。 あと、袖口はわざと線で描いてない部分があります。理由としては色の違いで陰を表現できるのと、線で描いてもごちゃごちゃする(=情報量が多くなる)のが嫌だったからです。 出来上がった下描きがこうです。 ようやく下描きまで終えることができました。作業が遅いので、ここまでくるのに数日かかっています。 ですが、ここからが本番といったところでしょうか… 線画線画とはいっても、今回は線の強弱もつけないので、ほぼ下描きに沿って描いていきます。使用したペンは「線画用ペン」です。これもクリスタでは人気のダウンロード素材ですね。 線を目立たせたくないのでブラシサイズを極端に小さくしてみました。たしか5px以下だったのは覚えてるんですよね…その上で眉・目・鼻の顔パーツと服のしわの一部は、他の部位よりさらにブラシサイズを小さくしています。 一番重要なのはベクターレイヤーで描いてることです。ラスターレイヤーと違い、後から線の修正がしやすいです。あと、「線Aを線Bと交わった点まで消す」といった動作もできるので重宝します。 とはいえ、全部の線を修正するのは手間なので出来るだけ自力で描いています。描いては消し描いては消しのアレです。 顔レイヤーの隣になにやら×がついてるモノがあることに目がいくかもしれません。後でくわしく説明しますが、実は眉毛、まつげ、瞳の部分の線画は最終的に見えなくなります。その見えなくするための機能を今オフにしている状態なのです。 その1おしまいさて今回は線画までの工程を書きました。実は本来、この一つの記事に全工程をまとめようと思ったのですが、めちゃめちゃ縦に長くて画像も多いので分割することになってしまいました… というわけで、ことちゃんイラストゆるゆるメイキング【その2】に続きます!ここまで読んでいただきありがとうございました!

> 内容を見る